Gauge chart API reference

• Example
• Properties
• Methods
• The coordinates properties
• Events
• Effects

Example

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

<script>
    new RGraph.Gauge({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 46,
        options: {
            title: 'Bandwidth'
        }
    }).draw();
</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
• Background properties
• Margin properties
• Labels and text properties
• Title properties
• Scale properties
• Color properties
• Shadow properties
• Needle properties
• Interactive features properties
• Miscellaneous properties

<div style="margin-left: 50px; display: inline-block">
    <canvas id="cvs" width="650" height="250"></canvas>
</div>

obj.set('colorsRanges', [
    [-100,-90, 'red'],
    [-90, -70,'yellow'],
    [-70, 70, '#0f0'],
    [70, 90, 'yellow'],
    [90,100,'red']
]);

Methods

.on('draw', function (obj)
{
   // Put your code here. Depending on the event, you can sometimes
   // get meta information from the RGraph registry. See the list
   // of event types below for more detail.
});

new RGraph.Gauge({
    id: 'cvs',
    min: 0,
    max: 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();

obj.canvas.onmousedown = function (e)
{
    var obj   = e.target.__object__;
    var value = obj.getValue(e);
    obj.value = value;
    
    obj.grow();
}

The coordinates properties

There's only one coordinates property on the Gauge chart and that's the obj.coordsText property.

• obj.coordsText This holds the coordinates of all of the text that has been added to the chart. Even if the text is blank (ie no text) then the coordinates will be added to this variable.

Events

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

new RGraph.Gauge({
    id: 'cvs',
    min: 0,
    max: 100,
    value: 57,
    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();

Effects

There's a stopAnimation() function that you can use to stop an animation immediately if you need to. There's a line chart demo called demos/line-effects-stop-animation.html in the download archive that demonstrates the use of this function.

• The grow effect (effects-gauge-grow.html in the download archive

<script>
    //
    // Optional callback function that's called when the effect is complete
    //
    function myCallback (obj)
    {
        // ...
    }

    obj = new RGraph.Gauge({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 56
        options: {
        }
    }).grow({frames: 60}, myCallback);
</script>