A segmented Donut chart

This is an example of using the Pie chart that's customised to such a degree that it appears as more of a progress meter or a "% complete" style meter.

The segmentation effect is achieved by using the draw event. This event is used by code that draws lines from outside the Donut chart back to the center, drawing them every 10-15 degrees. In this custom code the RGraph API function RGraph.degrees2Radians() is used to do the necessary conversion and the RGraph.path2() function is used to handle the pathing of these lines.

The text in the center of the Donut chart is added by using the RGraph Drawing API - the Text drawing API object. On each frame of the roundRobin effect the object is updated with the new percentage and it then gets redrawn. This gives you an effect of the text constantly changing.

<script src="RGraph.common.core.js"></script>
<script src="RGraph.drawing.text.js"></script>
<script src="RGraph.pie.js"></script>

<canvas id="cvs" width="350" height="350">
    [No canvas support]
</canvas>

<script>
    var pie = new RGraph.Pie({
        id: 'cvs',
        data: [v = 70,100 - v],
        options: {
            variant: 'donut',
            variantDonutWidth: 50,
            colors: ['red', 'white'],
            colorsStroke: 'transparent',
            shadow: false
        }
    }).roundRobin({frames: 60}).on('draw', function (obj)
    {
        var width = 5;

        for (var i=0; i<360; i+=10) {
            RGraph.path2(
                obj.context,
                'b a % % % % % false l % % c f black',
                obj.centerx,
                obj.centery,
                obj.radius + 2,
                RGraph.degrees2Radians(i - (width / 2)),
                RGraph.degrees2Radians(i + (width / 2)),
                obj.centerx,
                obj.centery
            );
        }

        if (text) {
            text.text = parseInt(v * obj.get('effect.roundrobin.multiplier')) + '%';
        }
    });



    var text = new RGraph.Drawing.Text({
        id: 'cvs',
        x: pie.centerx,
        y: pie.centery,
        text: pie.data[0] + '%',
        options: {
            font: 'Arial',
            size: 64,
            halign: 'center',
            'valign': 'center',
            colors: ['#aaa']
        }
    }).draw();
</script>