A Horseshoe chart

View the bare-bones version of this demo with any interactive features or animations enabled

As mentioned above, this was previously a variant of the Pie chart. Now, however, it has been converted to a full chart type - the Horseshoe meter.

It's a small, circular meter-type chart type. In previous incarnations a large amount of code was necessary to create this chart - then less so as a Pie chart variant and now there's similarly only a small amount of code that's necessary to create it. As a full chart type it also supports a better style of the grow effect - so now if the meter is already showing a value and you set a new one and grow to it - instead of always growing from the minimum value the meter will grow from its current value. This is shown in the example here.

The chart is a simple circular meter that has a circle at either end. These circles can be disabled if you wish. The colors of the chart and the label can also be changed.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.horseshoe.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="300" height="300">[No canvas support]</canvas>

This is the code that generates the chart - it should be placed AFTER the canvas tag(s):