# 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 ({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();

            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>