A progress-bar Pie/donut chart
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: '',
backgroundAxesColor: 'rgba(0,0,0,0)',
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)'],
strokestyle: '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>