A segmented Donut chart

[No canvas support]

This is an example of using the Pie chart that's customised to such a degree that it appears as more a progress meter or a "percent 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 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.

This goes in the documents header:

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

Put this where you want the chart to show up:

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

This is the code that generates the chart:

<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>