Share:

RGraph: HTML5 canvas graph library - Adjusting your graphs interactively - HProgress bar

The Horizontal Progress Bar can be adjusted by clicking on it. When adjusting is finished the onadjustend event fires. If you attach a function to the onadjustend event (as below) you can get the new value by looking at the .value property (eg myProgress.value).

<script>
    window.onload = function (e)
    {

        var hprogress = new RGraph.HProgress('myc', 83, 100, 0);
        hprogress.Set('chart.color', 'green');
        hprogress.Set('chart.adjustable', true);
        hprogress.Set('chart.margin', 5);
        hprogress.Set('chart.tickmarks.inner', true);
        hprogress.Set('chart.tickmarks.zerostart', true);
        hprogress.Set('chart.units.post', '%');
        hprogress.Draw();

        RGraph.AddCustomEventListener(hprogress, 'onadjustbegin', function () {console.log('Old value: ' + hprogress.value  );});
        RGraph.AddCustomEventListener(hprogress, 'onadjustend', function () {console.log('New value: ' + hprogress.value  );});
    }
</script>