Highlighting a piechart slice from an HTML element (mouseover)
Posted
by
nickhar
on Stack Overflow
See other posts from Stack Overflow
or by nickhar
Published on 2012-12-14T02:45:34Z
Indexed on
2012/12/14
5:03 UTC
Read the original article
Hit count: 202
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.
© Stack Overflow or respective owner