A Horizontal Progress bar based bullet chart

[No canvas support]

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: {
            vmargin: 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>