Gauge chart API reference

• Example
• The obj.nodes property
• Properties
• Methods
• Events

Example

See all of the 1200+ demos in the download archive.

<script>
    new RGraph.SVG.Gauge({
        id: 'chart-container',
        innerMin: 0,
        innerMax: 10,
        outerMin: 0,
        outerMax: 100,
        value: 7.8,
        options: {
            adjustable: true,
            centerpinRadius: 10,
            labelsIngraphUnitsPost: '%',
            labelsIngraphDecimals: 1,
            jcolors: ['red','blue'],
            marginTop: 15,
            marginBottom: 15,
            marginLeft: 15,
            marginRight: 15
        }
    }).draw();
</script>

The obj.nodes property

Instead of coordinates the Gauge chart maintains references to the nodes that are created - such as the axes, the labels and text nodes. For example:

• obj.nodes.background
• obj.nodes.labelsIngraph
• obj.nodes.labelsIngraphGroup
• obj.nodes.needleGroup
• obj.nodes.innerAxis
• obj.nodes.innerAxisGroup
• obj.nodes.outerAxis
• obj.nodes.outerAxisGroup

For example, you could add your own event listeners like this:

<script>
    obj.nodes.needleGroup.onclick = function (e)
    {
        alert('The value is: ' + obj.value);
    }
</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
• Margin properties
• Background properties
• Color properties
• Other text properties
• Scale properties
• Title properties
• Tickmark properties
• Shadow properties
• Other properties

new RGraph.Bar({
    id: 'cvs',
    data: [4,8,6,5,3,5,6,4,1,5],
    options:
        style: [
            '.RGraph_tooltip h2 {color: gray; font-style: italic;}',
            '.RGraph_tooltip p {color: #eee; font-size: 10pt;}'
        ]
    }
}).draw();

Methods

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

<script>
    new RGraph.SVG.Gauge({
        id: 'chart-container',
        innerMin: 0,
        innerMax: 10,
        outerMin: 0,
        outerMax: 100,
        value: 56,
        options: {
            events: {
                beforedraw: function () {alert('The beforedraw event fired');},
                draw: [
                    function (obj) {alert('The first draw event listener function.');},
                    function (obj) {alert('The second draw event listener function.');}
                ]
            }
        }
    }).draw();
</script>

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

Events

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

new RGraph.SVG.Gauge({
    id: 'chart-container',
    innerMin: 0,
    innerMax: 100,
    outerMin: 0,
    outerMax: 10,
    value: 78,
    options: {
        events: {
            draw: function (obj){console.log('The draw event has fired');},
            
            // Alternatively you can give an array of functions to run
            firstdraw: [
                function (obj) {console.log('First function');},
                function (obj) {console.log('Second function');}
            ]
        }
    }
}).draw();