A horseshoe Pie chart
This goes in the documents header:
<script src="../libraries/RGraph.common.core.js">&ly;/script>
<script src="../libraries/RGraph.pie.js"></script>>
Put this where you want the chart to show up:
<canvas id="cvs" width="300" height="300" style="border: 1px solid #ddd">[No canvas support]</canvas>
This is the code that generates the chart:
<script>
color = 'black';
colorsBackground = '#ddd';
donutWidth = 5;
pie = new RGraph.Pie({
id: 'cvs',
data: [65,35],
options: {
variant: 'donut',
variantDonutWidth: donutWidth,
colors: [color, colorsBackground],
colorsStroke: 'transparent',
shadow: false,
marginLeft: 15,
marginRight: 15,
marginTop: 15,
marginBottom: 15,
}
}).roundRobin().on('draw', function (obj)
{
// Add the text that sits in the center of the donut
RGraph.text2(obj, {
text: parseInt(obj.data[0] * obj.get('effect.roundrobin.multiplier')) + '%',
x: obj.centerx,
y: obj.centery,
size: 60,
halign: 'center',
valign: 'center'
});
}).on('beforedraw', function (obj)
{
// These two path commands draw the gray background to the donut
RGraph.path2(obj.context,
'b a % % % 0 6.29 false',
obj.centerx,
obj.centery,
obj.radius
);
RGraph.path2(obj.context,
' a % % % 0 6.29 true f %',
obj.centerx,
obj.centery,
obj.radius - donutWidth,
colorsBackground
);
}).on('draw', function (obj)
{
// Get the coordinates to the start point of the donut chart
var coords1 = RGraph.getRadiusEndPoint(
obj.centerx,
obj.centery,
RGraph.PI + RGraph.HALFPI,
obj.radius - (donutWidth / 2)
);
// Get the coordinates to the end point of the donut chart
var coords2 = RGraph.getRadiusEndPoint(
obj.centerx,
obj.centery,
obj.angles[0][1],
obj.radius - (donutWidth / 2)
);
// Draw a white semicircle at the START of the donut
RGraph.path2(obj.context,
'b a % % % 0 6.29 false f white',
coords1[0],
coords1[1],
14
);
// Draw a black circle at the START of the donut
RGraph.path2(obj.context,
'b a % % % 0 6.29 false f black',
coords1[0],
coords1[1],
8
);
// Draw a white semicircle at the END of the donut
RGraph.path2(obj.context,
'b a % % % 0 6.29 false f white',
coords2[0],
coords2[1],
14
);
// Draw a black circle at the END of the donut
RGraph.path2(obj.context,
'b a % % % 0 6.29 false f black',
coords2[0],
coords2[1],
8
);
});
</script>