Hi,
I have requirement of pie chart in pie chart with exact occupancy (exactly same as below code).
Please check the below html code.
I could achieve it using below code.
But i need labels with a line like in canvasjs pie chart.
Please suggest something to achieve this.
Thanks,
Sailaja
***********************************************************************************************`
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title></title>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var ctx = $(‘#canvas’)[0].getContext(“2d”);
//ctx.fillStyle = “#00A308”;//green
ctx.fillStyle = “#800000”;//maroon
ctx.beginPath();
ctx.arc(150, 150, 100, 0, Math.PI*2, true);
ctx.closePath();
ctx.fillText(25, 250, 50);
ctx.fill();
//drawWedge(0, 0, “red”, 150);
var cx=150;
var cy=150;
var radius=90;
for (var i = 0; i < 3; i++)
{
var startAngle=i*Math.PI/2;
var endAngle=startAngle+Math.PI/2;
ctx.beginPath();
ctx.moveTo(cx,cy);
ctx.arc(cx,cy,radius,startAngle,endAngle);
ctx.closePath();
//ctx.fillStyle=”#FF1C0A” ;//red
ctx.fillStyle = “#0000FF”;//blue
ctx.fillText(10, 50, 250);
ctx.fill();
}
startAngle=0*Math.PI/2;
endAngle=startAngle+Math.PI/5;
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.arc(150, 150, 80, startAngle, endAngle);
ctx.closePath();
ctx.fillStyle = “#FFFF00”;//yellow
ctx.fillText(“20%”, 280, 200);
//ctx.Text(20, 280, 200);
ctx.fill();
});
</script>
</head>
<body>
<!–<div id=”canvas” style=”width:40%”></div>–>
<canvas id=”canvas” width=”300″ height=”300″></canvas>
</body>
</html>
*************************************************************************************************
.
