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>
window.onload = function ()
{
/**
* Create the Pie chart as normal
*/
var pie = new RGraph.Pie({
id: 'cvs',
data: [8,6,5,3,5],
options: {
linewidth: 1,
shadow: true,
labels: ['Bob',,,'Jerry'],
labelsSticksList: true,
textAccessible: true
}
}).draw()
/**
* Add the event listener fnctions 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 fnctions 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>