About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

 

Download
Get the latest version of RGraph (version 6.16) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

A Horseshoe chart

[No canvas support]

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>