A Horseshoe chart

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

<script>
    horseshoe = new RGraph.Horseshoe({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 65,
        options: {
            labelUnitsPost: '%'
        }
    }).grow();
    
    update = function ()
    {
        horseshoe.value = horseshoe.value + RGraph.random(-20,20);
        horseshoe.grow();
        
        setTimeout(update, 2000);
    };

    setTimeout(update, 2000);
</script>