I am new to jquery and javascript. I am making a pie-chart and I want to highlight the pieces of pie-chart. I have succeeded in making a pie-chart but the problem with me is me on highlighting.
I have to highlight every piece of pie when mouse is over it. Now, when I search it on google then there are various plug-in avalible but is there a way to do without it. I tried by creating a jquery function and then when mouseover it should change highlight but I cannot do it by that way.
Here is my code---
<html> <body> <canvas width="500" height="500" id="canvas"></canvas> <script> //initialize data set var data = [ 100, 68, 20, 30, 100 ]; var canvas = document.getElementById('canvas'); var c = canvas.getContext('2d'); //draw background c.fillStyle = "white"; c.fillRect(0,0,500,500); //a list of colors var colors = [ "orange", "green", "blue", "yellow", "teal"]; //calculate total of all data var total = 0; for(var i=0; i<data.length; i++) { total += data[i]; } //draw pie data var prevAngle = 0; for(var i=0; i<data.length; i++) { //fraction that this pieslice represents var fraction = data[i]/total; //calc starting angle var angle = prevAngle + fraction*Math.PI*2; //draw the pie slice c.fillStyle = colors[i]; //create a path c.beginPath(); c.moveTo(250,250); c.arc(250,250, 100,prevAngle, angle, false); c.lineTo(250,250); //fill it c.fill(); //stroke it c.strokeStyle = "black"; c.stroke(); //update for next time through the loop prevAngle = angle; } </script> </body> </html> Pie chart should be highlighted something like below: 
Please help me with this. I know it simple but I am not able to figure out. Any help is appreciated. Please comment if you have any question?
