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.
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
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
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
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: