A nested Donut chart/progress bar

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 rings = [
        {color: '#2B908F', value: 67, width: 50, radius: 200},
        {color: '#90EE7E', value: 57, width: 50, radius: 147},
        {color: '#F45B5B', value: 46, width: 50, radius: 94}
    ];

    for (var i=0; i<rings.length; ++i) {
        new RGraph.Pie({
            id: 'cvs',
            data: [1],
            options: {
                variant: 'donut',
                colors: [rings[i].color],
                strokestyle: 'rgba(0,0,0,0)',
                shadow: false,
                radius: rings[i].radius,
                variantDonutWidth: rings[i].width,
                key: ['John','Freddy','Lucy'],
                keyPosition: 'gutter',
                keyTextColor: 'white',
                keyColors: ['#2B908F','#90EE7E','#F45B5B']
            }
        }).draw();

        new RGraph.Pie({
            id: 'cvs',
            data: [1],
            options: {
                variant: 'donut',
                colors: ['rgba(0,0,0,0.25)'],
                strokestyle: 'rgba(0,0,0,0)',
                shadow: false,
                radius: rings[i].radius,
                variantDonutWidth: rings[i].width
            }
        }).draw();

        new RGraph.Pie({
            id: 'cvs',
            data: [rings[i].value,100 - rings[i].value],
            options: {
                variant: 'donut',
                colors: [rings[i].color,'rgba(0,0,0,0)'],
                strokestyle: 'rgba(0,0,0,0)',
                shadow: false,
                radius: rings[i].radius,
                variantDonutWidth: rings[i].width
            }
        }).roundRobin();
    }
</script>

« Back