3D Donut chart

[No canvas support]

This is an example of a 3D Pie chart effect used in conjunction with the donut variant. The Pie chart 3D effect is achieved by stretching the canvas in the horizontal direction (using a transformation) and then drawing the chart as usual.

The chart uses the (now default) list style of showing labels - so they're listed vertically on each appropriate side of the Pie chart and then sticks are added pointing to the relevant segment.

The 3D effect for the Pie chart is achieved by drawing the horizontally stretched Pie chart multiple times - each time adjusting the Pie chart up by a pixel.

The shadow that you see here is just added to the bottom donut chart - therefore adding to the 3D effect.

Note: The roundrobin effect doesn't currently work correctly with 3D presentation.

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.pie.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="350" style="float: right">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    new RGraph.Pie({
        id: 'cvs',
        data: [4,8,6,3,5,2,5],
        options: {
            colorsStroke: 'rgba(0,0,0,0)',
            shadow: true,
            shadowOffsetx: 0,
            shadowOffsety: 5,
            shadowColor: '#aaa',
            radius: 100,
            variant: 'donut3d',
            labels: ['Mavis','Kevin','Luis','June','Olga','Luis','Pete','Bridget'],
            tooltips: ['Mavis','Kevin','Luis','June','Olga','Luis','Pete','Bridget'],
            labelsSticksLength: 15,
            labelsSticksLinewidth: 2,
            textAccessible: false
        }
    }).draw();
</script>