I wrote this algorithm, which, based on the data in the array, makes a pie chart using the canvas element:
function pieChart() {
canvas = document.getElementById('pie-chart');
canvas.width = 300;
canvas.height = 300;
context = canvas.getContext('2d');
const data = [1, 5, 4, 3];
const colors = ['brown', 'yellow', 'purple', 'pink'];
let summ = 0;
for (let index = 0; index < data.length; index++) {
summ += data[index];
}
function deg(num) {
return num / summ * 360;
}
function rad(deg) {
return deg * (Math.PI / 180);
}
let start = 3 * Math.PI / 2;
for (let index = 0; index < data.length; index++) {
context.beginPath();
context.moveTo(150, 150);
context.arc(150, 150, 150, start, rad(deg(data[index])), false);
context.lineTo(150, 150);
context.fillStyle = colors[index];
context.fill();
start = rad(deg(data[index]));
}
}
<body onload="pieChart();">
<canvas id="pie-chart"></canvas>
</body>
Here is the result I got:
What am I doing wrong?
>Solution :
There’s two notable problems.
start = rad(deg(data[index]));
You are moving your start angle to just be the size of the previous wedge, where in reality, you want to add the size of the previous wedge. This should instead be:
start += rad(deg(data[index]));
context.arc(150, 150, 150, start, rad(deg(data[index])), false);
The end angle you specify here is the size of the wedge angle. It instead needs to be offset from the start angle (i.e. you have to add the start angle to it). This should instead be:
context.arc(150, 150, 150, start, start + rad(deg(data[index])), false);
function pieChart() {
canvas = document.getElementById('pie-chart');
canvas.width = 300;
canvas.height = 300;
context = canvas.getContext('2d');
const data = [1, 5, 4, 3];
const colors = ['brown', 'yellow', 'purple', 'pink'];
let summ = 0;
for (let index = 0; index < data.length; index++) {
summ += data[index];
}
function deg(num) {
return num / summ * 360;
}
function rad(deg) {
return deg * (Math.PI / 180);
}
let start = 3 * Math.PI / 2;
for (let index = 0; index < data.length; index++) {
context.beginPath();
context.moveTo(150, 150);
context.arc(150, 150, 150, start, start + rad(deg(data[index])), false);
context.lineTo(150, 150);
context.fillStyle = colors[index];
context.fill();
start += rad(deg(data[index]));
}
}<body onload="pieChart();">
<canvas id="pie-chart"></canvas>
</body>