A segmented Horizontal Progress bar

[No canvas support]

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>
    value = 7;

    hprogress = new RGraph.HProgress({
        id: 'cvs',
        min: 0,
        max: 10,
        value: 0,
        options: {
            colors: ['red'],
            colorsStrokeOuter: 'rgba(0,0,0,0)',
            linewidth: 5,
            tickmarksCount: 0,
            colorsBackground: 'rgba(0,0,0,0)',
            marginTop: 10,
            marginLeft: 10,
            marginRight: 10,
            marginBottom: 10,
            labelsOffsetx: -30,
            labelsOffsety: -65,
            textColor: 'white',
            textSize: 30
        }
    }).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 numbers
    for (var i=0; i<=value; ++i) {
        (function (num)
        {
            setTimeout(function ()
            {
                hprogress.value = num;
                RGraph.redraw();
            }, num * 150);
        })(i)
    }
</script>