# Pie Chart using HTML Canvas

## Data format

We have three dimensional array with data, label and colour of the segment. Here is the sample.
`var data = [[40, 'Available','green'],[15,'Blocked','#f0f000'],[20, 'Sold','#f00000']];`

## Canvas Size

We can fix the Pia chart radious, based on this value the canvas height and width can be changed. We kept some margin for labels
`my_canvas.width=my_canvas.height=(radious * 2 ) + radious/4;`

## Understanding Angles of Arc Each data element in our array represents one segment of the pia chart. We will transform this data to relative angle in radian of the Pie Chart. The sum of all data ( variable total ) is equal to 360 degree or 2* PI ( 2* Math.Pi ) in this Circle or Pie Chart.

Inside the for loop for each data of our array we will find out radian angle of the segment representing the data like this.
`var angle= (data[i] * 2/total).toFixed(3)`
Above angle is in radian. Note that we draw arc between one start angle ( start_angle ) and one end angle ( end_angle ) . While starting or drawing the first segment the start angle =0 ; and end angle is equal to angle of the segment ( variable angle ) .
While drawing the next segment (representing data ) the start_angle is equal to end_angle of previous segment and end_angle is equal to start_angle plus angle of the segment.
```var angle= (data[i] * 2/total).toFixed(3) // Angle of data segment in radian
var end_angle=parseFloat(angle) + parseFloat(start_angle);```
After drawing the arc we assign value of end_angle to start_angle
`start_angle=end_angle; // start angle for next segment.` We can write text part of the data within the data segment. Herre we will find out half angle of the segment and x, y coordinates of the text point like this.
```text_angle=start_angle + ( ( end_angle - start_angle) / 2 )

## Full Code is here

HTML Canvas
`<canvas id="my_canvas" width="35" height="230"</canvas>`
JavaScript
```<script>
var data=[[40,'Available','green'],[15, 'Blocked','#f0f000'],  [20, 'Sold','#f00000'] ];

///////// No edit //////////
//var my_canvas=\$('#my_canvas').get(0)  // Jquery
var my_canvas=document.getElementById("my_canvas"); // JavaScript
var gctx = my_canvas.getContext("2d");

// Center of the Pie chart
var center_x=my_canvas.width/2;
var center_y=my_canvas.height/2;

// Find out the sum of all data elements
var total=0;
for (i=0;i<data.length;i++)
{
total = total + data[i];
}

var x1=y1=0;
var start_angle=0;
for (i=0;i<data.length;i++)
{
gctx.beginPath();

var angle= (data[i] * 2/total).toFixed(3) // Angle of data segment in radian
var end_angle=parseFloat(angle) + parseFloat(start_angle);

gctx.moveTo(center_x,center_y); //  Start a new setment
// Draw the Arc //
// angle to write text part of the data //
var text_angle=start_angle + ( ( end_angle - start_angle) / 2 )

gctx.closePath();

gctx.fillStyle = data[i];
gctx.fill();
gctx.font = '12px sans-serif';
gctx.fillStyle='#000000'
gctx.fillText(data[i] + ' : ' + data[i],x1,y1);
start_angle=end_angle; // start angle for next segment.
}
gctx.stroke();
</script>```

## Subscribe

* indicates required
Subscribe to plus2net plus2net.com

Post your comments , suggestion , error , requirements etc here .