# 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