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: 179

Filed under:
|
|

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

Related posts about jQuery

Related posts about html