Drawing a Labeled Pie Chart

This JavaScript program demonstrates how to draw a pie chart using the canvas with labeled sectors.

PieChart.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's Javascript</title>
    <script type="text/javascript" src="PieChart.js"></script>
  </head>
  <body onload="Initialize()">
    <canvas id="idCanvas" width="640" height ="640" style="background-color: #F0F0F0;"></canvas>
  </body>
</html>

PieChart.js

const kqData = [
	{msName: "Cows", miCount: 843, msColor: "black"},
	{msName: "Horses", miCount: 1252, msColor: "brown"},
	{msName: "Turtles", miCount: 265, msColor: "darkkhaki"},
	{msName: "Chickens", miCount: 2269, msColor: "red"},
	{msName: "Dogs", miCount: 501, msColor: "gray"},
	{msName: "Cats", miCount: 948, msColor: "orange"},
	{msName: "Frogs", miCount: 2574, msColor: "green"},
	{msName: "Birds", miCount: 625, msColor: "blue"}
];

function Initialize() {
	const qCanvas = document.getElementById("idCanvas");
	const qContext2D = qCanvas.getContext("2d");
	const kiTotal = kqData.reduce((iSum, {miCount}) => iSum + miCount, 0);
	const kdStartAngle = Math.random()*2*Math.PI;
	let dAngle = kdStartAngle;
	qContext2D.font = "20px Arial";
	qContext2D.textBaseline = "middle";

	for (let qCurrData of kqData) {
		let dSectorAngle = 2.0*Math.PI*(qCurrData.miCount/kiTotal);
		// Draw the pie sector
		qContext2D.beginPath();
		qContext2D.arc(320, 320, 200, dAngle, dAngle + dSectorAngle);
		qContext2D.lineTo(320, 320);
		qContext2D.closePath();
		qContext2D.fillStyle = qCurrData.msColor;
		qContext2D.fill();
		// Add text labels to the slices
		let dMiddleAngle = (2.0*dAngle + dSectorAngle)/2.0;
		// Make sure that the middle angle is in [0, 2Pi) to properly place the labels
		while (dMiddleAngle > 2.0*Math.PI) {
			dMiddleAngle = dMiddleAngle - 2.0*Math.PI;
		}
		const kdFourthPi = Math.PI/4.0;
		// Set the aligment of the text based on the angle of display
		if ((dMiddleAngle > kdFourthPi && dMiddleAngle < 3.0*kdFourthPi) || 
				(dMiddleAngle > 5.0*kdFourthPi && dMiddleAngle < 7.0*kdFourthPi)) { // bottom and top
			qContext2D.textAlign = "center";
		} else if (dMiddleAngle > 3*kdFourthPi && dMiddleAngle < 5*kdFourthPi) { // left side
			qContext2D.textAlign = "end";
		} else { // right side
			qContext2D.textAlign = "start";
		}
		qContext2D.fillText(qCurrData.msName, 320 + 220*Math.cos(dMiddleAngle), 320 + 240*Math.sin(dMiddleAngle));
		dAngle = dAngle + dSectorAngle;
	}
}

Canvas JavaScript

Drawing a Labeled Pie Chart

PieChart.html

PieChart.js

Output