11 May 2012

Simple Javascript Pie Chart using HTML5 Canvas tag


I had a look around today for a handy pie chart that I could quickly drop into a new web app I'm working on and it seems there's a lot of bloated solutions out there. I like to keep things short and sweet so I found this one online and edited it to make it a bit more user friendly. Enjoy!

Please see right hand pane before copying my code >>


//ADD THIS BETWEEN YOUR HEAD TAGS OR TO AN EXTERNAL JS FILE:
var pieProps = new Object()

function pieChart(canvas, radius, percentages, n, colors) {
 var canvas = document.getElementById(canvas)
 var a = pieProps.a = canvas.getContext("2d");
 pieProps.colors = colors
 pieProps.i = 0
 canvas.width = 3.5*radius;
 canvas.height = 2.5*radius;
 x = y = canvas.height/2;
 a.font = "bold 12px Arial";
 var u = 0;
 var v = 0;
 for (i=0;i < percentages.length;i++) {
  v += percentages[i];
  W(i)(x,y,radius,u,v);
  u = v;
  a.fillText(n[i], x+radius+10, y-radius/2+i*18);
 }
}

function W(x,y,r,u,v) {
 var a = pieProps.a
 if(r) {
  a.beginPath();
  a.moveTo(x,y);
  a.arc(x, y , r, (u||0)/50*Math.PI, (v||7)/50*Math.PI, 0);
  a.lineTo(x,y);
  a.fill();
 } else {
  a.fillStyle = '#'+pieProps.colors[pieProps.i++];
 }
 return W;
}

//ADD THIS TO YOUR PAGE SOMEWHERE:
<canvas id="c"> Your browser does not support the canvas element. </canvas>

//EXAMPLE USAGE:
<body onload="pieChart('c', 100, [70,25,15], ['Carbs','Protein','Fat'], ['CCCCCC','FFBF43','FF850D'])">

This code is adapted from http://reubencrane.com/canvas_pie.html

11 comments:

Unknown said...

Nice adaptation, glad I could help!

Unknown said...

Great example. useful information. I am learn for Jquery script on

Unknown said...

Nice coding. http://www.dreamdestinations.in/

Anonymous said...

nice things ..a great example
If anyone want learn more about Cakephp image behavior...This is the nice blog to read...

cakephplogics.blogspot.com

Kuldeep said...

nice things ..a great example
If anyone want learn more about Cakephp image behavior...This is the nice blog to read...

http://cakephplogics.blogspot.com

Unknown said...

Thank you for sharing. Good code. I have found an interesting chart http://www.pptstar.com/diagrams/pie-charts/, but do not know how I can use them. I want to try to make such chart on your example.

Unknown said...

canada goose
coach factory outlet
coach outlet
ray ban sunglasses
fit flops
canada goose jackets
kate spade outlet
cheap oakleys
birkenstock sandals
birkenstocks
20161228caiyan]
\

Anonymous said...

Excellent and very cool idea and the subject at the top of magnificence and I am happy to this post..Interesting post! Thanks for writing it. What's wrong with this kind of post exactly? It follows your previous guideline for post length as well as clarity..Website for school uk

chenlili said...

coach outlet
michael kors outlet
nfl jerseys wholesale
christian louboutin outlet
coach outlet online
canada goose outlet
canada goose outlet store
canada goose outlet
christian louboutin sale
pandora outlet
shenyuhang20180608

Treasurebox said...

Buy Mattress naz online on Treasurebox store items which you will be provide easily on a single click.

هند القحاطنى said...





شركة تنظيف شقق بالجبيل
شركة تنظيف فلل بالجبيل
شركة مكافحة حشرات بالجبيل
شركة تنظيف منازل براس تنورة
شركة مكافحة حشرات براس تنورة
شركة تنظيف مكيفات براس تنوره
شركة تنظيف منازل بالنعيريه
شركة مكافحة حشرات بالنعيريه
شركة تنظيف مكيفات بالنعيريه
شركة تنظيف منازل بالخفجى









Post a Comment

Cron Design Studio: Dublin based web design & software development