How to create 3D Pie chart

Share RGraph:   

Summary
A guide for creating 3D Pie charts. The 3D effect is achieved by using the canvas scale function to increase the horizontal size of the canvas

Note: As of August 2015 there's much better 3D support in RGraph.

[No canvas support]

By using the scale() function to transform the canvas (ie stretch it horizontally) you achieve a 3D Pie chart effect. Because of the stretching effect the text will look larger too and also some dynamic features are unlikely to work correctly - though as you can see on the right tooltips do work)


<script>
    window.onload = (function ()
    {
        var pie = new RGraph.Pie({
            id: 'cvs',
            data: [4,5,5,7,5,8,4,9],
            options: {
                strokestyle: 'rgba(0,0,0,0)',
                linewidth: 1,
                shadowBlur: 5,
                shadowOffsety: 15,
                shadowOffsetx: 0,
                shadowColor: '#aaa',
                radius: 80,
                tooltips: ['Mavis','Kevin','Luis','June','Olga','Luis','Pete','Bridget'],
                tooltipsCoordsPage: true,
                labels: ['Mavis','Kevin','Luis','June','Olga','Luis','Pete','Bridget'],
                textAccessible: false,
                labelsSpaced: true,
                labelsSticksColors: ['black','black','black','black','black','black','black','black']
            }
        })
       
       // This is the factor that the canvas is scaled by
       var factor = 1.5;

       // Set the transformation of the canvas - a scale up by the factor (which is 1.5 and a
       // simultaneous translate so that the Pie appears in the center of the canvas
       pie.context.setTransform(factor,0,0,1,((pie.canvas.width * factor) - pie.canvas.width) * -0.5,0);

       //pie.draw();
        pie.roundRobin({frames:30});
    })
</script>

Comments

Add a new comment...