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 »

Horseshoe meter

Example

<script>
    horseshoe = new RGraph.SVG.Horseshoe({
        id: 'chart-container',
        min: 0,
        max: 100,
        value: 63,
        options: {
            labelsCenterDecimals: 1,
            labelsCenterUnitsPost: '%'
        }
    }).grow();
    
    var d = 2500; setTimeout(f = function ()
    {
        horseshoe.value = horseshoe.value + RGraph.SVG.random({min: -7, max: 5});
        horseshoe.grow();
        
        setTimeout(f, d);
    }, d);
</script>

Properties

You can use these properties to control how the chart appears. You can set them by including them in the options section of the configuration as shown above.

Chart configuration properties

Name: centerx
Description: 
If required, you can position the progress bar using this instead of the margins.
Default: null
Name: centery
Description: 
If required, you can position the progress bar using this instead of the margins.
Default: null
Name: radius
Description: 
If required, you can size the progress bar using this instead of the margins.
Default: null
Name: width
Description: 
The width of the progress bar (ie the outer radius minus the inner radius).
Default: 10

Margin properties

Name: marginLeft
Description: 
The left margin of the chart.
Default: 15
Name: marginRight
Description: 
The right margin of the chart.
Default: 15
Name: marginTop
Description: 
The top margin of the chart.
Default: 15
Name: marginBottom
Description: 
The bottom margin of the chart.
Default: 15

Color properties

Name: colors
Description: 
The colors to be used for the meter. The first color is that of the foreground and the second color is used for the background circular bar.
Default: ['black','#eee']
Name: backgroundColor
Description: 
The color of the background.
Default: null

Labels and text properties

Name: textFont
Description: 
The font used to render the text.
Default: Arial, Verdana, sans-serif
Name: textSize
Description: 
The size of the text.
Default: 60
Name: textColor
Description: 
The color of the labels.
Default: black
Name: textItalic
Description: 
Whether the labels are italic or not.
Default: false
Name: textBold
Description: 
Whether the labels are bold or not.
Default: false
Name: text
Description: 
This allows you to add custom text to your chart if you want to. There's a dedicated page that describes this option here.
Default: null
Name: labelsCenter
Description: 
Whether to show the center label.
Default: true
Name: labelsCenterFont
Description: 
The font used to render the center label.
Default: null
Name: labelsCenterSize
Description: 
The size of the center label.
Default: null
Name: labelsCenterColor
Description: 
The color of the center label.
Default: null
Name: labelsCenterItalic
Description: 
Whether the center label is italic or not.
Default: null
Name: labelsCenterBold
Description: 
Whether the center label is bold or not.
Default: null
Name: labelsCenterUnitsPre
Description: 
Units that are prepended to the center label.
Default: null
Name: labelsCenterUnitsPost
Description: 
Units that are appended to the center label.
Default: null
Name: labelsCenterPoint
Description: 
The character that's used as the decimal point for the center label.
Default: null
Name: labelsCenterThousand
Description: 
The character that's used as the thousand separator for the center label.
Default: null
Name: labelsCenterDecimals
Description: 
The number of decimals to apply to the center label.
Default: null
Name: labelsCenterSpecific
Description: 
The specific text to use as the center label.
Default: null
Name: labelsSpecificFormattedDecimals
Description: 
When using formatted labels this is the number of decimals that are applied to the %{value_formatted} macro.
Default:  0
Name: labelsSpecificFormattedPoint
Description: 
When using formatted labels this is the decimal point character that's used with the %{value_formatted} macro.
Default: .
Name: labelsSpecificFormattedThousand
Description: 
When using formatted labels this is the thousand separator character that's used with the %{value_formatted} macro.
Default: ,
Name: labelsSpecificFormattedUnitsPre
Description: 
When using formatted labels these are the units that are prepended to the number with the %{value_formatted} macro.
Default: (an empty string)
Name: labelsSpecificFormattedUnitsPost
Description: 
When using formatted labels these are the units that are appended to the number with the %{value_formatted} macro.
Default: (an empty string)
Name: labelsCenterOffsetx
Description: 
An offset to add to the horizontal position of the center label.
Default:  0
Name: labelsCenterOffsety
Description: 
An offset to add to the vertical position of the center label.
Default:  0

Other properties

Name: ends
Description: 
With this property you can disable the circles at the ends of the meter.
Default: true
Name: endsRadius
Description: 
If specified this is the radius of the circles at each end of the meter.
Default: null
Name: endsColor
Description: 
If specified this is the color of the circles at each end of the meter.
Default: null
Name: endsStroke
Description: 
If specified this is the stroke color of the circles at each end of the meter (the stroke goes around the fill).
Default: null
Name: adjustable
Description: 
If true then the meter will be adjustable. Click on the meter to alter its value.
Default: false
Name: responsive
Description: 
This option is new to the July 2023 release (v6.13) and allows you to inline the responsive configuration instead of appending it on to the end of the object it as a function. The documentation and demo pages have been updated to use this new option. You can read more about the responsive feature by reading the responsive configuration page.
Default: null

Methods

obj.get(name)

This can be used to get properties if necessary. It's normally used after the chart is drawn if you need to get parameters (if you're doing custom coding for example).

obj.set(name, value)

This can be used to set properties if necessary. It's normally used after the chart is drawn if you need to set additional parameters or change them.

obj.on(event, handler)

This function adds an event listener (such as beforedraw or draw) to the chart object. For example:

obj.on('draw', function (obj)
{
    // Put your code here
});
obj.exec(func)

This function can be used to execute a function (immediately). It's not event-based (ie it doesn't run when something happens) - it just runs immediately - and only once. You might use it when you need to get something from the chart when it has been drawn and then call the redraw function. Because this function only runs once the RGraph.SVG.redraw function would not cause a loop - which would happen if you used the draw event.

obj.exec(function (obj)
{
    // Put your code here
});
obj.responsive(configuration)

The responsive function helps your charts respond to different browser window sizes and screen resolutions. For example, for smaller screens, you might want to have angled labels or show shorter versions of them completely.

Update: There is now the responsive configuration option available to you and this is now the preferred method of configuration.

The responsive function and configuration option are documented on their own page here.

obj.getAngle(event or value))

When you click on the chart this method can be used to get the corresponding angle. Angles are measured in radians and go from (approximately) -(Math.PI / 2) (middle top) to 1.5 * Math.PI. Example usage is:

<script>
    horseshoe = new RGraph.SVG.Horseshoe({
        id: 'chart-container',
        min: 0,
        max: 100,
        value: 63,
        options: {
            width: 60,
            labelsCenterDecimals: 1
        }
    }).draw();
    
    horseshoe.container.onclick = function (e)
    {
        var angle = horseshoe.getAngle(e);
        // var angle = horseshoe.getAngle(51); // You can also pass the function a value too
        
        alert(angle);
    };
</script>
obj.getValue(event or angle)

When you click on the chart this method can be used to get the corresponding value. The value is based on the minimum and maximum values. Example usage is:

<script>
    horseshoe = new RGraph.SVG.Horseshoe({
        id: 'chart-container',
        min: 0,
        max: 100,
        value: 63,
        options: {
            width: 60,
            labelsCenterDecimals: 1
        }
    }).draw();
    
    horseshoe.container.onclick = function (e)
    {
        var value = horseshoe.getValue(e);
        // var value = horseshoe.getValue(angle); // You can also pass the function an angle too
        
        alert(value);
    };
</script>
obj.getRadius(event)

When you click on the chart this method can be used to get the corresponding radius of the click starting from the center of the chart. Example usage is:

<script>
    horseshoe = new RGraph.SVG.Horseshoe({
        id: 'chart-container',
        min: 0,
        max: 100,
        value: 63,
        options: {
            width: 60,
            labelsCenterDecimals: 1
        }
    }).draw();
    
    horseshoe.container.onclick = function (e)
    {
        var radius = horseshoe.getRadius(e);
        
        alert(radius);
    };
</script>

Events

RGraph supports custom events that allow you to easily add interactivity to your charts if required. The following events are available:

For example:
new RGraph.SVG.Horseshoe({
    id: 'chart-container',
    min: 0,
    max: 100,
    value: 54,
    options: {
        adjustable: true
    }
}).draw().on('adjustbegin', function (obj)
{
    console.log('Adjusting has started');

}).on('adjust', function (obj)
{
    console.log('Adjusting is in progress...');

}).on('adjustend', function (obj)
{
    alert('Adjusting has finished. New value is: ' + obj.value);
});

Effects

These effects are available and can be used instead of the draw function.
<script>
    //
    // Optional callback function that's called when the effect is complete
    //
    function myCallback (obj)
    {
        // ...
    }


    horseshoe RGraph.SVG.Horseshoe({
        id: 'chart-container',
        min: 0,
        max: 100,
        value: 63,
        options: {
            width: 60,
            labelsCenterDecimals: 1
        }
    }).grow({frames: 60, callback: myCallback});
</script>