HTML5 Canvas pie chart

Question

I'm attempting to create a simple pie chart like shown in the graphic below:

The chart will show the results for a quiz where a user can choose either a, b or c. They're 10 questions and the user can only choose one option per question.

What I want to do is show the pie chart with each segment being a percentage of 100% by passing in the values for either a,b, or c.

I have the following so far:

var greenOne = "#95B524";  var greenTwo = "#AFCC4C";  var greenThree = "#C1DD54";    function CreatePieChart() {    var chart = document.getElementById('piechart');    var canvas = chart.getContext('2d');    canvas.clearRect(0, 0, chart.width, chart.height);      var total = 100;      var a = 3;    var b = 4;    var c = 3;      for (var i = 0; i < 3; i++) {      canvas.fillStyle = "#95B524";      canvas.beginPath();      canvas.strokeStyle = "#fff";      canvas.lineWidth = 3;      canvas.arc(100, 100, 100, 0, Math.PI * 2, true);      canvas.closePath();      canvas.stroke();      canvas.fill();    }  }  CreatePieChart();

<canvas id="piechart" width="200" height="200"></canvas>

The colors are specific to the size of the segment, so green one is used for the largest and green three for the smallest.

Thanks

Answer 1

Even after searching Google and triple-checking my radians values, etc. I was still having trouble with this, so I have created a jsFiddle for people to play with as a live example and will post the code below as well. (Update: in the fiddle v2, stroke and labels are added also.)

var canvas = document.getElementById("can"); var ctx = canvas.getContext("2d"); var lastend = 0; var data = [200, 60, 15]; // If you add more data values make sure you add more colors var myTotal = 0; // Automatically calculated so don't touch var myColor = ['red', 'green', 'blue']; // Colors of each slice  for (var e = 0; e < data.length; e++) {   myTotal += data[e]; }  for (var i = 0; i < data.length; i++) {   ctx.fillStyle = myColor[i];   ctx.beginPath();   ctx.moveTo(canvas.width / 2, canvas.height / 2);   // Arc Parameters: x, y, radius, startingAngle (radians), endingAngle (radians), antiClockwise (boolean)   ctx.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2, lastend, lastend + (Math.PI * 2 * (data[i] / myTotal)), false);   ctx.lineTo(canvas.width / 2, canvas.height / 2);   ctx.fill();   lastend += Math.PI * 2 * (data[i] / myTotal); }

<canvas id="can" width="200" height="200" />