HTML5 Canvas Pie Chart

The HTML5 canvas element certainly opens a lot of possibilities for web developers. Inspired by Arne @’s submission I thought I would explore the canvas elements capabilities by creating a simple javascript function that generates a pie chart.

The Canvas

First we need a canvas element.

<canvas id="c"> Your browser does not support the canvas element. </canvas>

Next we need the script that will draw the Pie Chart. I decided to use two functions; one for the wedge and the other to to loop through the data.

The Wedge Function

I adapted Arne’s function for drawing arcs to draw wedges.

function W(x,y,r,u,v) {
  if(r) {
     a.arc(x, y , r, (u||0)/50*Math.PI, (v||7)/50*Math.PI, 0);
  } else {
     a.fillStyle = '#'+'a000b4bbff95'.substr(x,3);
  return W;

x and y are the coordinates of the charts center. r is the radius of the chart. u is the startAngle and v is the stopAngle in percent. Wedge color aka fillStyle is set by x when r is missing. The colors available are interlaced. The function returns itself so that it can be call likeĀ W(0)(100,100,50,0,25);

The Chart

Next I needed a function that would use the wedge function the draw each wedge of the pie chart.

function pie(r,b,n) {
    a.font="bold 12pt Arial";
    var u = 0;
    var v = 0;
    for (i=0;i < b.length;i++) {

Again r is the radius and is used to calculate the canvas’ height and width and variables x and y. b is an array of the percents and n is an array of the names used for the charts key. The function loops through the elements of the array, drawing each wedge and key. It is assumed that the elements of b total 100.

Bringing the pieces together

Lastly, create the needed arrays and call the pie function which in turn calls the wedge function.

var n = ['RED','BLACK','BLUE','GREEN','PINK']; //key names for each wedge
var b = [20,25,15,10,30]; //percents, needs to total 100

Again it is assumed that b’s elements total 100 and that n and b have the same number of elements.

What it looks like

So if you are using an HTML5 compliant browser you get this:

Your browser does not support the canvas element.