How to create a Pie chart explode effect

Share RGraph:   

Summary
A guide to how to create a Pie chart explode effect

[No canvas support]

Here we have a Pie chart which by default is exploded - and when each segment is clicked the selected segment explodes further. It's not a default option, but the code required to do it is minimal and shown below.


<script>
    window.onload = (function ()
    {
        var pie = new RGraph.Pie({
            id: 'cvs',
            data: [9,5,12,8,4,9],
            options: {
                strokestyle: '#e8e8e8',
                linewidth: 5,
                shadowBlur: 5,
                shadowOffsetx: 5,
                shadowOffsety: 5,
                shadowColors: '#aaa',
                exploded: 10,
                radius: 80,
                labels: ['Mavis','Kevin','Luis','June','Olga','Luis','Pete','Bridget'],
                labelsSticks: true,
                labelsSticksLength: 15,
                textSize: 14
            }
        }).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)
        {
            e.target.style.cursor = 'pointer';
        
        }).roundRobin({frames:60})
        
        window.addEventListener('mousedown', function (e) {pie.set('exploded', 10);}, false);
    })
</script>

Comments

Add a new comment...