A horseshoe Pie chart

Summary: A Pie/Donut chart that's using the dedicated RGraph.Horseshoe class in order to make it appear as a circular meter.

[No canvas support]

Here's a Pie chart that's using the RGraph.Horseshoe class. So by using this it actually appears on the page as a meter instead of a regular Pie chart.

Formerly, a significant amount of code was needed to achieve this but now it's a simple matter of using the dedicated RGraph.Horseshoe object that's part of the Pie chart file.

Basically what the chart is doing is drawing a Pie chart (configured to be a donut chart) with some text being drawn in the center in the draw event (which is called on every frame of the animation).

As the value of the Pie chart is updated by the roundRobin() effect the text in the center is updated as well.

The gray background to the chart is drawn using the beforedraw event.

And the two ends to the circle are actually each made up from a circle which has one color for the fill (black by default) and another for the stroke (white by default).

It used to take a significant amount of code to create this chart, but as you can see from the code shown here that is no longer the case.


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: