A nested Donut chart/progress bar

[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>
    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 ({1}%)'.format(rings[0].value),
                    'Freddy ({1}%)'.format(rings[1].value),
                    'Lucy ({1}%)'.format(rings[2].value)
                ],
                keyPosition: 'gutter',
                keyTextSize: 16,
                keyTextColor: 'white',
                keyColors: ['#2B908F','#90EE7E','#F45B5B'],
                textAccessible: false,
                keyPositionY: 12.5
            }
        }).on('draw', function (obj)
        {
            var co = obj.context,
                ca = obj.canvas;
            
            RGraph.path2(co,
                'b a % % % % % false f rgba(0,0,0,0.45)',
                obj.centerx,
                obj.centery,
                obj.radius,
                0,
                2 * Math.PI
            );

        }).draw();

        (function (index)
        {
            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
                }
            }).on('draw', function (obj)
            {
                var halfWidth = obj.get('variantDonutWidth') / 2;

                var co        = obj.context,
                    endpoint1 = RGraph.getRadiusEndPoint(obj.centerx, obj.centery, RGraph.PI + RGraph.HALFPI, obj.radius);
                    endpoint2 = RGraph.getRadiusEndPoint(obj.centerx, obj.centery, obj.angles[0][1], obj.radius - halfWidth);

                RGraph.path2(co,
                    'b a % % % % % false f %',
                    endpoint1[0],
                    endpoint1[1] + halfWidth,
                    25,
                    0,
                    RGraph.TWOPI,
                    obj.get('colors')[0]
                );

                RGraph.path2(co,
                    'b a % % % % % false f %',
                    endpoint2[0],
                    endpoint2[1],
                    25,
                    0,
                    RGraph.TWOPI,
                    obj.get('colors')[0]
                );
                
            }).roundRobin();
        })(i);
    }
</script>