A Horizontal Bar chart example showing the X axis drawing API object

[No canvas support]

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.drawing.xaxis.js"></script>
<script src="RGraph.hbar.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="400">
    [No canvas support]
</canvas>
This is the code that generates the chart:
<script>
    marginTop = 55;

    hbar = new RGraph.HBar({
        id: 'cvs',
        data: [[80,64],[1,2],[11,12],[3,12],[5,7]],
        options: {
            marginLeft: 165,
            marginRight: 20,
            marginTop: 35,
            yaxisLabels: [
                'Improved',
                'Worsened',
                'No change - \r\npeoples perceptions\r\nare generally positive',
                'No change - \r\npeoples perceptions\r\nare generally negative',
                "Don't know"
            ],
            colors: ['#F68B23','#164366'],
            xaxisScaleMax: 100,
            backgroundGrid: false,
            xaxis: false,
            yaxis: false,
            xaxisLabels: false,
            key: ['Non-disabled','Disabled'],
            keyPosition: 'margin',
            keyPositionY: 0,
            tooltips: ['Improved','Improved','Worsened','Worsened', 'No change - \r\npeoples perceptions\r\nare generally positive','No change - \r\npeoples perceptions\r\nare generally positive','No change - \r\npeoples perceptions\r\nare generally negative','No change -\r\npeoples perceptions\r\nare generally negative',"Don't know", "Don't know"],
            marginLeft: 175,
            marginTop: marginTop
        }
    }).on('beforedraw', function (obj)
    {
        obj.context.fillStyle = '#eee';
        obj.context.fillRect(obj.marginLeft, obj.marginTop, obj.canvas.width - obj.marginLeft - obj.marginRight, obj.canvas.height - obj.marginTop - obj.marginBottom);
    }).on('draw', function (obj)
    {
        obj.context.strokeStyle = '#aaa';
        obj.context.strokeRect(
            obj.marginLeft,
            obj.marginTop,
            obj.canvas.width - obj.marginLeft - obj.marginRight,
            obj.canvas.height - obj.marginTop - obj.marginBottom
        );
    }).grow();

    new RGraph.Drawing.XAxis({
        id: 'cvs',
        y: marginTop,
        options: {
            marginLeft: hbar.get('marginLeft'),
            marginRight: hbar.get('marginRight'),
            xaxisScaleMax: 100,
            align: 'top',
            clearto: 'white'
        }
    }).draw();
</script>