Highlighting a piechart slice from an HTML element (mouseover)
- by nickhar
I have a series of HTML table cells with data - an example of which is:
<tr id="rrow1">
<td>
<a href="/electricity" class="category">Electricity</a>
</td>
<td>
901.471
</td>
</tr>
<tr id="rrow2">...
<tr id="rrow3">...
etc
In this case, each <tr> (or hypathetically for the wider community a div/span/tr/td) is assigned a sequential id based on $rrow++; in a while loop (in PHP).
I also have a Piechart using the highcharts library, where i'd like to highlight the slice (sliced: true) based upon onmouseover of particular div/span/tr/td element - in this case #rrow1 as above, but multiple/iterative elements as required and (sliced: false) onmouseout...
As a simple example, I've tried accessing various derivatives of the following, but failed:
$('#rrow1').mouseover(function() {
chart.series[0].graph.attr('sliced', true);
});
$('#rrow1').mouseout(function() {
chart.series[0].graph.attr('sliced', false);
});
The nearest I've found is this but bastardised at most and without success:
plotOptions: {
series: {
mouseOver: function() {
if( $('#rrow1').mouseover )
series.x = sliced: true;
},
mouseOut: function() {
if( $('#rrow1').mouseout )
series.x = sliced: false;
}
}
}
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.
