A segmented HProgress chart

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.hprogress.js"></script>

Put this where you want the chart to show up:

<div style="margin-bottom: 20px">
    <canvas id="cvs" width="600" height="100">[No canvas support]</canvas>
</div>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var value = 7;

        var hprogress = new RGraph.HProgress({
            id: 'cvs',
            min: 0,
            max: 10,
            value: 0,
            options: {
                margin: 7,
                colors: ['red','yellow','pink','white'],
                strokestyle: 'rgba(0,0,0,0)',
                linewidth: 5,
                tickmarks: 0,
                backgroundColor: 'rgba(0,0,0,0)',
                gutterTop: 10,
                gutterBottom: 10,
                labelsOffsetx: -30,
                labelsOffsety: 5,
                tickmarksZerostart: false
            }
        }).on('beforedraw', function (obj)
        {
            obj.context.fillStyle = 'black';
            obj.context.fillRect(0,0,obj.canvas.width,obj.canvas.height);
        }).on('draw', function (obj)
        {
            var x    = obj.coords[0][0]
                y    = obj.coords[0][1],
                w    = obj.coords[0][2],
                h    = obj.coords[0][3],
                pa2  = RGraph.path2,
                lw   = 5,
                step = 1
            
            for (var i=0; i<=10; i+=step) {
                
                var x2 = obj.getXCoord(i);
                
                pa2(obj.context, 'lw % ss white sr % % % %', lw, x, y, x2 - x, h);
            }
        }).draw();
        
        
        // Increase the represented value - a custom grow effect
        // that increases the value in whole values
        for (var i=0; i<=value; ++i) {
            (function (num)
            {
                setTimeout(function ()
                {
                    hprogress.value = num;
                    RGraph.redraw();
                }, num * 150);
            })(i)
        }
    }
</script>

« Back