This is the Pie chart from the front page. It starts with the
roundRobin()
effect and allows you to click to explode
the Pie chart segments.
<script src="RGraph.common.core.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="350" height="250"> [No canvas support] </canvas>This is the code that generates the chart:
<script>
pie = new RGraph.Pie({
id: 'cvs',
data: [9,5,12,8,4,9],
options: {
colorsStroke: '#e8e8e8',
linewidth: 2,
shadowBlur: 5,
shadowOffsetx: 5,
shadowOffsety: 5,
shadowColor: '#aaa',
exploded: 10,
radius: 80,
labels: ['Mavis','Kevin','Luis','June','Olga','Luis','Pete','Bridget']
}
}).on('click', function (e, shape)
{
var index = shape.index;
var obj = shape.object;
// Reset all of the segments to 10
obj.set('exploded', 10);
obj.explodeSegment(index, 15);
e.stopPropagation();
}).on('mousemove', function (e, shape)
{
return true;
})
pie.roundRobin({frames:30});
window.addEventListener('mousedown', function (e)
{
pie.set('exploded', 10);
}, true);
</script>