Adjusting your charts interactively - Vertical Progress bar

Summary: Information about adjusting the Vertical Progress bar interactively. It can be used to highlight values or control something via a webpage.

[No canvas support]

Nothing pertinent is kept in the registry. If you wish to get the new value of the progress you can check the obj.value property. If you want the value before the adjustment, you can check the value with the adjustbegin event (instead of the adjustend event).

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.


<script>
   var vprogress = new RGraph.VProgress({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 83,
        options: {
            colors: ['red'],
            adjustable: true,
            marginInner: 15,
            tickmarksInner: true,
            labelInner: true,
            scaleUnitsPost: '%',
            marginRight: 55
        }
    }).draw().on('adjustbegin', function (obj)
    {
        document.getElementById("output").value += 'Value before adjustment: ' + obj.value + '\n';
    }).on('adjust', function (obj)
    {
        document.getElementById("output").value += 'Value during adjustment: ' + obj.value + '\n';
    }).on('adjustend', function (obj)
    {
        document.getElementById("output").value += 'Value after adjustment: ' + obj.value + '\n';
    });
</script>