Adjusting your charts interactively - Thermometer charts

  Read comments... [No canvas support]

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


<script>
    window.onload = (function ()
    {
        var thermometer = new RGraph.Thermometer({
            id: 'cvs',
            min: 0,
            max: 100,
            value: 78
        })
        
        var grad = thermometer.context.createLinearGradient(0,50,0,350);
        grad.addColorStop(0, 'orange');
        grad.addColorStop(1, 'white');

        thermometer.set({
            colors: [grad],
            titleSide: 'An adjustable thermometer',
            adjustable: true
        }).draw().on('onadjustbegin', function (obj)
        {
            document.getElementById("output").value += 'Value before adjustment: ' + obj.value + '\n';
        }).on('onadjust', function (obj)
        {
            document.getElementById("output").value += 'Value during adjustment: ' + obj.value + '\n';
        }).on('onadjustend', function (obj)
        {
            document.getElementById("output").value += 'Value after adjustment: ' + obj.value + '\n';
        });
    })
</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.

Share RGraph
X

Comments