An example of "explode when clicked"

This demo shows a Pie chart that has two expanding segments when clicked.

[No canvas support]

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>