A Horizontal Progress bar based bullet chart
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.dynamic.rect.js"></script>
<script src="RGraph.hprogress.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="100">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
hprogress = new RGraph.HProgress({
id: 'cvs',
min: 0,
max: 100,
value: 85,
options: {
marginInner: 12
}
}).grow();
var coords = hprogress.coords[0];
var x = hprogress.getXCoord(55);
// Create the rect object that covers the lower part
var rect = new RGraph.Drawing.Rect({
id: 'cvs',
x: hprogress.marginLeft,
y: hprogress.marginTop + 5,
width: x - hprogress.marginLeft,
height: hprogress.canvas.height - hprogress.marginTop - hprogress.marginBottom - 10,
options: {
colorsFill: 'Gradient(rgba(255,0,0,0.5):rgba(255,0,0,0):rgba(255,0,0,0))'
}
}).draw()
x = hprogress.getXCoord(95);
// Create the rect object that indicates the target
var rect = new RGraph.Drawing.Rect({
id: 'cvs',
x: x - 3,
y: hprogress.marginTop + 5,
width: 6,
height: hprogress.canvas.height - hprogress.marginTop - hprogress.marginBottom - 10,
options: {
colorsFill: 'black',
highlightStroke: 'rgba(0,0,0,0)',
tooltips: ['The target was 95% of eveything, everywhere']
}
}).draw();
</script>