Adjusting your charts interactively - Horizontal Progress bar

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

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

[No canvas support]
<script>
    hprogress = new RGraph.HProgress({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 83,
        options: {
            'margin.bottom': 30,
            colors: ['Gradient(white:red)'],
            adjustable: true,
            margin: 10,
            tickmarksInner: true,
            tickmarksZerostart: true,
            scaleUnitsPost: '%'
        }
    }).draw().on('adjustbegin', function (obj)
    {
        console.log('The adjustbegin event has fired.');
    }).on('adjust', function (obj)
    {
        console.log('The adjust event has fired.');
    }).on('adjustend', function (obj)
    {
        console.log('The adjustend event has fired.');
    });
</script>