Adjusting your charts interactively - Gauge chart

Information about adjusting the Gauge chart interactively. It can be used to highlight values or control something via a webpage.

[No canvas support]

The Gauge chart has the facility to be adjusted. There are three custom RGraph events associated with it:

See below for an example of using these events.


<script>
    window.onload = (function ()
    {
        var gauge = new RGraph.Gauge({
            id: 'cvs',
            min: 0,
            max: 100,
            value: 78,
            options: {
                adjustable: true
            }
        }).draw().on('adjustbegin', function (obj)
        {
            // ...
        }).on('adjust', function (obj)
        {
            // ...
        }).on('adjustend', function (obj)
        {
            // ...
        });
    })
</script>

The RGraph adjusting events

There are three RGraph events associated with adjusting. The adjustbegin event fires when adjusting begins. Much like the mousedown event. The adjust event fires during adjusting, much like the mousemove event. The adjustend event fires when adjusting is finished, much like the mouseup event.

Some examples of using the three events. Each gets the shape information (ie the applicable bar) from the RGraph registry.