# The (old) front page Pie chart

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.

This goes in the documents header:

    <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>
        var pie = new RGraph.Pie({
            id: 'cvs',
            data: [9,5,12,8,4,9],
            options: {
                strokestyle: '#e8e8e8',
                linewidth: 2,
                shadowBlur: 5,
                shadowOffsetx: 5,
                shadowOffsety: 5,
                shadowColor: '#aaa',
                exploded: 10,
                radius: 80,
                labels: ['Mavis','Kevin','Luis','June','Olga','Luis','Pete','Bridget'],
                labelsSticksList: true,
                textAccessible: true
            }
        }).on('click', function (e, shape)
        {
            var index = shape.index;
            var obj = shape.object;

            // Reset all 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>

« Back