pie slice lables

by Rahul Adik

HTML

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

JavaScript

var canvas;
			var ctx;
			var lastend = 0;
		    var pieColor = ["#ECD078","#D95B43","#C02942","#542437","#53777A"];
		var pieData = [10,30,20,60,40];
			var pieTotal = 10 + 30 + 20 + 60 + 40; // done manually for demo
		
			canvas = document.getElementById("canvas");
			ctx = canvas.getContext("2d");
			
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			
			var hwidth = ctx.canvas.width/2;
			var hheight = ctx.canvas.height/2;
			
			
			for (var i = 0; i < pieData.length; i++) {
					ctx.fillStyle = pieColor[i];
					ctx.beginPath();
					ctx.moveTo(hwidth,hheight);
					ctx.arc(hwidth,hheight,hheight,lastend,lastend+
					  (Math.PI*2*(pieData[i]/pieTotal)),false);
					
					
					ctx.lineTo(hwidth,hheight);
					ctx.fill();
					
					//Labels on pie slices (fully transparent circle within outer pie circle, to get middle of pie slice)
					//ctx.fillStyle = "rgba(255, 255, 255, 0.5)"; //uncomment for debugging
		//			ctx.beginPath();
		//			ctx.moveTo(hwidth,hheight);
		//			ctx.arc(hwidth,hheight,hheight/1.25,lastend,lastend+
		//			  (Math.PI*(pieData[i]/pieTotal)),false);  //uncomment for debugging 
					
					var radius = hheight/1.5; //use suitable radius
					var endAngle = lastend + (Math.PI*(pieData[i]/pieTotal));
					var setX = hwidth + Math.cos(endAngle) * radius;
					var setY = hheight + Math.sin(endAngle) * radius;
					ctx.fillStyle = "#ffffff";
					ctx.font = '14px Calibri';
					ctx.fillText(pieData[i],setX,setY);
					
		//			ctx.lineTo(hwidth,hheight);
					//ctx.fill(); //uncomment for debugging
					
					lastend += Math.PI*2*(pieData[i]/pieTotal);
		}