Highlighting a piechart slice from an HTML element (mouseover)

I have a series of HTML table cells with data - an example of which is:\[code\]<tr id="rrow1"> <td> <a href="http://stackoverflow.com/electricity" class="category">Electricity</a> </td> <td> 901.471 </td></tr><tr id="rrow2">...<tr id="rrow3">...etc\[/code\]In this case, each \[code\]<tr>\[/code\] (or hypathetically for the wider community a \[code\]div\[/code\]/\[code\]span\[/code\]/\[code\]tr\[/code\]/\[code\]td\[/code\]) is assigned a sequential id based on \[code\]$rrow++;\[/code\] in a while loop (in PHP).I also have a Piechart using the highcharts library, where i'd like to highlight the slice (\[code\]sliced: true\[/code\]) based upon onmouseover of particular \[code\]div\[/code\]/\[code\]span\[/code\]/\[code\]tr\[/code\]/\[code\]td\[/code\] element - in this case \[code\]#rrow1\[/code\] as above, but multiple/iterative elements as required and (\[code\]sliced: false\[/code\]) onmouseout...As a simple example, I've tried accessing various derivatives of the following, but failed:\[code\]$('#rrow1').mouseover(function() { chart.series[0].graph.attr('sliced', true);});$('#rrow1').mouseout(function() { chart.series[0].graph.attr('sliced', false);});\[/code\]The nearest I've found is this but bastardised at most and without success:\[code\]plotOptions: { series: { mouseOver: function() { if( $('#rrow1').mouseover ) series.x = sliced: true; }, mouseOut: function() { if( $('#rrow1').mouseout ) series.x = sliced: false; } } }\[/code\]These are far from approaching correct and despite searching I can't find a valid/helpful example to work from or draw direction.You can view the pie chart in question on jsfiddle here.
 
Back
Top