Adjusting your charts interactively - Gauge chart

Share RGraph:   
[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,
                textAccessible: true
            }
        }).draw().on('onadjustbegin', function (obj)
        {
            // ...
        }).on('onadjust', function (obj)
        {
            // ...
        }).on('onadjustend', function (obj)
        {
            // ...
        });
    })
</script>

The RGraph adjusting events

There are three RGraph events associated with adjusting. The onadjustbegin event fires when adjusting begins. Much like the onmousedown event. The onadjust event fires during adjusting, much like the onmousemove event. The onadjustend event fires when adjusting is finished, much like the onmouseup event.

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

Comments

Add a new comment...