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]
This is the code that generates the chart:
    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);

        var text = new RGraph.Drawing.Text({
            id: 'cvs',
            x: donut.centerx,
            y: donut.centery,
            text: '0%',
            options: {
                size: 52,
                halign: 'center',
                valign: 'center'

« Back

Share on Facebook Share on Twitter