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