RGraph - Free HTML5 and JavaScript charts

How to create 3D Pie charts

Please remember to link to the RGraph website and give your feedback here. Thanks!

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('cvs', [4,5,5,7,5,8,4,9]);
       pie.Set('chart.strokestyle', '#e8e8e8');
       pie.Set('chart.linewidth', 5);
       pie.Set('chart.shadow', true);
       pie.Set('chart.shadow.blur', 0);
       pie.Set('chart.shadow.offsety', 15);
       pie.Set('chart.shadow.offsetx', 0);
       pie.Set('chart.shadow.color', '#aaa');
       pie.Set('chart.exploded', 10);
       pie.Set('chart.radius', 80);
       pie.Set('chart.tooltips', ['Mavis','Kevin','Luis','June','Olga','Luis','Pete','Bridget']);
       pie.Set('chart.tooltips.coords.page', true);
       pie.Set('chart.labels', ['Mavis','Kevin','Luis','June','Olga','Luis','Pete','Bridget']);
       pie.Set('chart.labels.sticks', true);
       pie.Set('chart.labels.sticks.length', 15);
       
       // 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();
        RGraph.Effects.Pie.RoundRobin(pie, {frames:30});
    }
</script>

DEVELOPMENT