# A Donut chart showing percent complete

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>
        var target    = 73,
            increment = 2;

        //
        // This donut is the background
        var donut = new RGraph.Pie({
            id: 'cvs',
            data: [1],
            options: {
                variant: 'donut',
                colors: ['rgba(0,128,0,0.25)'],
                strokestyle: 'rgba(0,0,0,0)'
            }
        }).draw()

        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)',
                shadow: false
            }
        }).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