Drawing Pie Chart in HTML Canvas
Foreword: In this article I explain how a pie chart can be drawn using the HTML canvas. No image is involved.
By: Chrysanthus Date Published: 21 Apr 2016
Introduction
Example
You will draw the following figure (pie chart):
Description of Pie Chart
People use different types of browsers. Internet Explorer is used by 25% of all web users. Opera is used by 4% of all web users. Safari is used by 6% of all web users. Chrome is used by 25% of all web users. Firefox is used by 40% of all web users. Well, before we continue, know that these percentages are fictitious (they are not real).
The color of the sector for Internet Explorer is orange. The color of the sector for Opera is chocolate. The color of the sector for Safari is purple. The color of the sector for Chrome is green. The color of the sector for Firefox is khaki.
Calculating the Angles
A complete circle is 360 degrees round, which is also 6.28 radians round. Each sector has an angle and all angles are calculated in the same way.
The angle for Internet Explorer is calculated as follows:
25/100 x 360 = 90 degrees
and in radians, it is:
25/100 x 6.28 = 1.57 radians
The angle for Opera is calculated as follows:
4/100 x 360 = 14.4 degrees
and in radians, it is:
4/100 x 6.28 = 0.25 radians
The angle for Safari is calculated as follows:
6/100 x 360 = 21.6 degrees
and in radians, it is:
6/100 x 6.28 = 0.38 radians
The angle for Safari is calculated as follows:
25/100 x 360 = 90 degrees
and in radians, it is:
25/100 x 6.28 = 1.57 radians
The angle for Firefox is calculated as follows:
40/100 x 360 = 144 degrees
and in radians, it is:
40/100 x 360 = 2.51 radians
Before the code draws, you need to obtain the reference to the HTML canvas element and then the reference to the context object. You will obtain them as follows:
<canvas id="C1" width="300" height="260">
</canvas>
<script type="text/ECMAScript">
cv = document.getElementById('C1');
cntxt = cv.getContext('2d');
</script>
The syntax for the main function provided by HTML Canvas 2D Context to draw the circle is:
context . arc(x, y, radius, startAngle, endAngle [, counterclockwise ] )
where (x,y) are the coordinates of the center of the circle. If you want the drawing to move counterclockwise, then the word, counterclockwise has to be present. The angles are in radians. This function will draw an arc, and will connect the arc with a straight line to the center of the circle.
Remember, the top-left corner of the canvas has coordinates, (0,0). x value increases to the right and y value increases downward. The coordinates of any point in the canvas is given in general terms as (x,y). The different values for x or y indicates the position of the corresponding pixel. A pixel is the smallest dot on the screen.
You will draw the pie chart, sector by sector. The first sector begins from the line, which begins from the center of the circle, and goes horizontally, until it meets the edge of the circle. The sector moves anticlockwise until it covers 90 degree. The first sector is for Internet Explorer.
The coordinates for the center of the circle are (100, 140).
Ignoring the if-construct, the code for the first sector is:
if (cv.getContext)
{
cntxt = cv.getContext('2d');
cntxt.beginPath();
cntxt.moveTo(100,140);
cntxt.arc(100,140, 100, 0, -1.57, 'counterclockwise');
cntxt.closePath();
cntxt.fillStyle = "orange";
cntxt.fill();
}
The first statement of code obtains the reference to the context object. The next statement begins the subpath. The statement after moves the context object to the center of the circle (100,140). The statement following draws an arc joining it to the center of the circle with a straight line. The next statement closes the subpath with a line to the center of the circle, and forms a sector. The statement after gives the sector its color. And the last statement fills the sector with the color.
The drawing moves anticlockwise. Since the drawing is moving anticlockwise the angle is given as –1.57 and not 1.57.
The drawing continues anticlockwise for the rest of the sectors. For the next sector, the start angle will be -1.57 and the end angle will be -1.82 = -(1.57 + .25). For the sector after, the start angle will be -1.82 and the end angle will be 2.2 = –(1.85 + 0.38). It continues like that till 6.28 radians, which is 360 degrees, is attained.
In practice, you will be required to draw a pie chart from numbers of people and not directly from percentages. You will have to convert the numbers into percentages, before converting to angles.
Consider a city of a total of 10,000 people. 2500 people use Internet Explorer; 400 use Opera; 600 use Safari; 2500 use Chrome; and 4000 use Firefox. The percentages will be calculated as follows:
Internet Explorer:
25000/10000 x 100 = 25%
Opera:
400/10000 x 100 = 4%
Safari:
6000/10000 x 100 = 6%
Chrome:
2500/10000 x 100 = 25%
Firefox:
4000/10000 x 100 = 40%
From the percentages, you can go ahead to calculate the angles, in radians.
The complete code for the above pie chart is:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<figure style="width:308px; border:2px solid red; display:inline-block">
<figcaption><strong>Browser Usage</strong></figcaption>
<canvas id="C1" width="300" height="260">
</canvas>
<figure/>
<script type="text/ECMAScript">
cv = document.getElementById('C1');
if (cv.getContext)
{
cntxt = cv.getContext('2d');
cntxt.beginPath();
cntxt.moveTo(100,140);
cntxt.arc(100,140, 100, 0, -1.57, 'counterclockwise');
cntxt.closePath();
cntxt.fillStyle = "orange";
cntxt.fill();
cntxt.beginPath();
cntxt.moveTo(100,140);
cntxt.arc(100,140, 100, -1.57, -1.82, 'counterclockwise');
cntxt.closePath();
cntxt.fillStyle = "chocolate";
cntxt.fill();
cntxt.beginPath();
cntxt.moveTo(100,140);
cntxt.arc(100,140, 100, -1.82, -2.2, 'counterclockwise');
cntxt.closePath();
cntxt.fillStyle = "purple";
cntxt.fill();
cntxt.beginPath();
cntxt.moveTo(100,140);
cntxt.arc(100,140, 100, -2.2, -3.77, 'counterclockwise');
cntxt.closePath();
cntxt.fillStyle = "green";
cntxt.fill();
cntxt.beginPath();
cntxt.moveTo(100,140);
cntxt.arc(100,140, 100, -3.77, 6.28, 'counterclockwise');
cntxt.closePath();
cntxt.fillStyle = "khaki";
cntxt.fill();
cntxt.beginPath();
cntxt.moveTo(230,62);
cntxt.lineWidth = 6;
cntxt.strokeStyle = "orange";
cntxt.lineTo(236,62);
cntxt.stroke();
cntxt.fillStyle = "black";
cntxt.fillText("Internet Expl.", 239,65);
cntxt.beginPath();
cntxt.moveTo(230,72);
cntxt.lineWidth = 6;
cntxt.strokeStyle = "chocolate";
cntxt.lineTo(236,72);
cntxt.stroke();
cntxt.fillStyle = "black";
cntxt.fillText("Opera", 239,75);
cntxt.beginPath();
cntxt.moveTo(230,82);
cntxt.lineWidth = 6;
cntxt.strokeStyle = "purple";
cntxt.lineTo(236,82);
cntxt.stroke();
cntxt.fillStyle = "black";
cntxt.fillText("Safari", 239,85);
cntxt.beginPath();
cntxt.moveTo(230,92);
cntxt.lineWidth = 6;
cntxt.strokeStyle = "green";
cntxt.lineTo(236,92);
cntxt.stroke();
cntxt.fillStyle = "black";
cntxt.fillText("Chrome", 239,95);
cntxt.beginPath();
cntxt.moveTo(230,102);
cntxt.lineWidth = 6;
cntxt.strokeStyle = "khaki";
cntxt.lineTo(236,102);
cntxt.stroke();
cntxt.fillStyle = "black";
cntxt.fillText("Firefox", 239,105);
}
</script>
</body>
</html>
Chrys
Related Links
Surrounding a Web Page Image with TextAdvantages and Disadvantages of HTML Table for Layout
Layout Without Frames for the Web Page
Designing Iconic Hyperlink for a Web Page
A Suitable RWD Layout for Smartphones and Desktop
Knowing the Resolutions of Visitor Screens with ECMAScript
Enlarge and Reduce HTML Image with ECMAScript
HTML5 Image Gallery and Image Enlargement with ECMAScript
Designing a Video Gallery
Ajax Web Technology Explained
Perl Course
MySQL Course
Using the PurePerl MySQL API
Drawing Bar Chart in HTML Canvas
Drawing Pie Chart in HTML Canvas
HTML Canvas 2D Context
Drawing a Histogram in HTML Canvas
More Related Links
PurePerl MySQL API
Web Development Course
Major in Website Design
Producing a Pure Perl Library