Pie Chart With Hover
HTML
<canvas id="canvaspiechart" width="300" height="300"></canvas>
<div id="result">hmm</div>
JavaScript
canvas = document.getElementById('canvaspiechart');
ctx = canvas.getContext('2d');
var cx = 150;
var cy = 150;
var sectorsarray = [];
function toRadians(deg) {
return deg * Math.PI / 180
}
function drawpiechart() {
ctx.fillStyle='#fdbb30';
ctx.beginPath();
ctx.moveTo(cx,cy);
ctx.arc(cx,cy,125,0,toRadians(65.4545454545));
ctx.lineTo(cx,cy);
ctx.closePath();
ctx.fill();
var yellow = {
start : 0,
end : toRadians(65.4545454545),
name : "yellow"
};
sectorsarray.push(yellow);
ctx.fillStyle='#0087dc';
ctx.beginPath();
ctx.moveTo(cx,cy);
ctx.arc(cx,cy,125,toRadians(65.4545454545),toRadians(98.1818181818));
ctx.lineTo(cx,cy);
ctx.closePath();
ctx.fill();
var blue = {
start : toRadians(65.4545454545),
end : toRadians(98.1818181818),
name : "blue"
};
sectorsarray.push(blue);
ctx.fillStyle='#EEEEEE';
ctx.beginPath();
ctx.moveTo(cx,cy);
ctx.arc(cx,cy,125,toRadians(98.1818181818),toRadians(360));
ctx.lineTo(cx,cy);
ctx.closePath();
ctx.fill();
var grey = {
start : toRadians(98.1818181818),
end : toRadians(360),
name : "grey"
};
sectorsarray.push(grey);
}
drawpiechart()
function isInsideSector(point, center, radius, angle1, angle2) {
function areClockwise(center, radius, angle, point2) {
var point1 = {
x : (center.x + radius) * Math.cos(angle),
y : (center.y + radius) * Math.sin(angle)
};
return -point1.x*point2.y + point1.y*point2.x > 0;
}
var relPoint = {
x: point.x - center.x,
y: point.y - center.y
};
return !areClockwise(center, radius, angle1, relPoint) &&
areClockwise(center, radius, angle2, relPoint) &&
(relPoint.x*relPoint.x + relPoint.y*relPoint.y <= radius * radius);
}
$("#canvaspiechart").mousemove(function (e) {
var canvasOffset = $("#canvaspiechart").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var mouseX = parseInt(e.clientX - offsetX);
var mouseY =...