A progress-bar Pie/Donut chart

[No canvas support]

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.rose.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="600">
    [No canvas support]
</canvas>
This is the code that generates the chart:
<script>
    data   = [0,0,3,2,1,6,4,5,3,6,8,7,8,9];
    labels = ['','','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

    rose = new RGraph.Rose({
        id: 'cvs',
        data: [0],
        options: {
            colors: ['rgba(0,0,0,0)'],
            labelsAxes: '',
            backgroundGridCount: data.length,
            backgroundGridRadials: 0
        }
    }).on('draw', function (obj)
    {
        // This hides the inner-most grid circle
        RGraph.path2(obj.context, 'b a % % 30 0 6.28 false f white', obj.centerx, obj.centery);
    }).draw();

    for (var i=0; i<data.length; i++) {
        var pie = new RGraph.Pie({
            data: [data[i],10 - data[i]],
            id: 'cvs',
            options: {
                variant: 'donut',
                variantDonutWidth: (rose.radius / (data.length) ) - 5 - 5,
                radius: ((rose.radius / data.length) * (i+1) ) - 5,
                shadow: false,
                colors: ['#22B573', 'rgba(0,0,0,0)'],
                colorsStroke: 'rgba(0,0,0,0)'
           }
       }).draw();
       
       RGraph.text2(rose.context, {
            x: rose.centerx - 5,
            y: pie.centery - pie.radius + 5,
            text: labels[i],
            halign: 'right',
            valign: 'center',
            size: 10,
            bounding: true,
            boundingFill: 'rgba(255,255,255,0.25)',
            boundingStroke: 'rgba(255,255,255,0)'
       });
    }
</script>