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>
    window.onload = (function ()
    {
        var hprogress = new RGraph.HProgress({
            id: 'cvs',
            min: 0,
            max: 100,
            value: 83,
            options: {
                marginBottom: 30
                colors: ['Gradient(white:red)'],
                adjustable: true,
                margin: 5,
                tickmarksInner: true,
                tickmarksZerostart: true,
                scaleUnitsPost: '%'
            }
        }).draw().on('adjustbegin', function (obj)
        {
            // ...
        }).on('adjust', function (obj)
        {
            // ...
        }).on('adjustend', function (obj)
        {
            // ...
        });
    })
</script>