CODEWITHSUNDEEP
javascriptjquerycharts
shv22
shv22

Reputation: 690

Need help in pie-chart in jquery?

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: enter image description here

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?

Upvotes: 2

Views: 998

Answers (1)

Raki
Raki

Reputation: 535

@Shubham Vashishtha: check this fiddle. http://jsfiddle.net/63eh9aty/2/ Here I have created a Json variable options which has required setting for highcharts, then next step is to add data to the series. which is implemented by creating a Json variable called "seriesOptions which contains name, data: [ ] (which is array). In order to insert actual data into data:[ ] i have created dataOptions variable. Next assigning data to dataOptions and adding each dataOptions to the seriesOptions finally adding seriesOptions data to the actual series of highchart .i.e options.series.push(seriesOptions) as shown in the fiddle.

Upvotes: 1

Related Questions