Adjusting your charts interactively - Thermometer charts

Information about adjusting the Thermometer chart 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 Thermometer you can check obj.value. If you want the value before the adjustment, you can check the value with the adjustbegin event (instead of the adjustend 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('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>

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.