A segmented Donut chart

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'],
            strokestyle: '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>

« Back