A Donut chart showing percent complete

[No canvas support]

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="450" height="450">
    [No canvas support]
</canvas>
This is the code that generates the chart:
<script>
    window.onload = function ()
    {
        var target = 73;
        var increment = 2

        var donut = new RGraph.Pie({
            id: 'cvs',
            data: [target,27],
            options: {
                variant: 'donut',
                colors: ['green','rgba(0,0,0,0)'],
                strokestyle: 'rgba(0,0,0,0)'
            }
        }).on('draw', function (obj)
        {
            // Update the text object with the value shown on the Donut chart
            if (text) {
                text.text = parseInt(target * obj.get('effect.roundrobin.multiplier')) + '%';
            }
        }).roundRobin(null, function ()
        {
            text.set('textAccessible', true);
            RGraph.redraw();
        })




        var text = new RGraph.Drawing.Text({
            id: 'cvs',
            x: donut.centerx,
            y: donut.centery,
            text: '0%',
            options: {
                size: 52,
                halign: 'center',
                valign: 'center'
            }
        }).draw()
    };
</script>

« Back

Share on Facebook Share on Twitter