A segmented Horizontal Progress bar
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>