# Pie chart effect then explode

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:

    <div style="margin-left: 50px">
        <canvas id="cvs" width="450" height="300">[No canvas support]</canvas>
    <div>

This is the code that generates the chart:

    <script>
        window.onload = function ()
        {
            var pie1 = new RGraph.Pie({
                id: 'cvs',
                data: [21,12,25,17,7],
                options: {
                    radius: 100,
                    tooltips: ['John (2%)', 'Richard (29%)', 'Fred (45%)', 'Brian (17%)', 'Peter (7%)'],
                    labels: ['John (2%)', 'Richard (29%)', 'Fred (45%)', 'Brian (17%)', 'Peter (7%)'],
                    labelsSticksList: true,
                    strokestyle: 'white',
                    linewidth: 2,
                    shadowBlur: 10,
                    shadowOffsetx: 0,
                    shadowOffsety: 0,
                    shadowColor: '#666',
                    textColor: '#999',
                    textAccessible: true
                }
            })

            var explode = 20;

            function myExplode (obj)
            {
                window.__pie__ = pie1;

                for (var i=0; i<obj.data.length; ++i) {
                    setTimeout('window.__pie__.explodeSegment('+i+',10)', i * 50);
                }
            }

            if (RGraph.ISOLD) {
                pie1.draw();

            } else if (navigator.userAgent.toLowerCase().indexOf('firefox') >= 0) {
                pie1.roundRobin();

            } else {
                /**
                * The RoundRobin callback initiates the exploding
                */
                pie1.roundRobin(null, myExplode);
            }
        };
    </script>