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