This demo shows a pie chart that has two expanding segments when clicked.
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.effects.js"></script> <script src="RGraph.pie.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="480" height="250"> [No canvas support] </canvas>This is the code that generates the chart:
<script> // Create the Pie chart as normal pie = new RGraph.Pie({ id: 'cvs', data: [8,6,5,3,5], options: { linewidth: 1, shadow: true, labels: ['Bob',,,'Jerry'] } }).draw(); // Add the event listener functions using the new dollar syntax. This handles the click // for the first and fourh segments pie.$3.onclick = pie.$0.onclick = function (e, shape) { var obj = shape['object']; obj.set('exploded', []); obj.explodeSegment(shape['index'], 15); } // Add the event listener functions using the new dollar syntax. This handles the mousemove // for the first and fourh segments pie.$3.onmousemove = pie.$0.onmousemove = function (e, shape) { return true; } // This function "resets" the pie before the above two functions fire. Note that the event is registered to // use the capture phase of click event so that it will fire before the above two $ events. window.addEventListener('click', function (e) { pie.set('exploded', []); RGraph.redraw(); }, true); </script>