This Pie chart is similar to the "explode onmousemove demo. But instead of using the onmousemove event this uses the onclick event. As a result of using the click event instead of the mousemove event you will see far fewer peculiarities.
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.tooltips.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="450" height="300">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
window.onload = function ()
{
// Create the Pie chart
var pie = new RGraph.Pie({
id: 'cvs',
data: [4,6,3,5,2,5,8],
options: {
labels: ['Monday', 'Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
labelsSticksList: true,
textColor: '#aaa',
exploded: 5,
radius: 100,
linewidth: 1,
textAccessible: true
}
}).on('click', function (e, shape)
{
if (!pie.get('exploded') || !pie.get('exploded')[shape['index']]) {
pie.explodeSegment(shape['index'], 25);
}
e.stopPropagation();
}).on('mousemove', function (e, shape)
{
e.target.style.cursor = 'pointer';
}).draw()
// Add the window click listener that resets the Pie chart
window.onmousedown = function (e)
{
pie.set('exploded', 5);
RGraph.redraw();
}
};
</script>