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 fourth 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 event for the first and fourth segments pie.$3.onmousemove = pie.$0.onmousemove = function (e, shape) { return true; } // This function "resets" the Pie chart 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>