A Horizontal Bar chart with a mirrored scale

This is an example of a Horizontal Bar chart where the Bars have both a positive and a negative side to them. It's done by using two Horizontal Bar charts - both of which are using the same SVG tag. You should note as well that whereas normally there's a positive and a negative side to the scale - here both sides of the scale are positive. This is achieved using the xaxisFormatter option

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.hbar.js"></script>
Put this where you want the chart to show up:
<div style="padding: 15px">
    <div style="width: 850px; height: 500px" id="chart-container"></div>
</div>
This is the code that generates the chart:
<script>
    new RGraph.SVG.HBar({
        id: 'chart-container',
        data: [12,10,11,8,12,7,10,11,8,13,7],
        options: {
            marginLeft: 75,
            marginLeftAuto: false,
            xaxisScaleMax: 25,
            xaxisScaleMin: 'mirror',
            backgroundGridHlines: false,
            backgroundGridVlines: false,
            yaxisColor: 'gray',
            xaxisLabelsCount: 10,
            xaxisScaleFormatter: function (obj, num)
            {
                return Math.abs(num);
            },
            colors: ['#A68560'],
            yaxisLabels: ['IL89L','IL56I','ILH78','IL899H','IL78J','IL90P','IL56H','IL58H','IL99K','IL99J','IL654G'],
            title: 'John and Barrys test results',
            titleItalic: true
        }
    }).draw();

    new RGraph.SVG.HBar({
        id: 'chart-container',
        data: [-11,-11,-10,-8,-10,-9,-11,-9,-10,-10,-9],
        options: {
            marginLeft: 75,
            marginLeftAuto: false,
            xaxisScaleMax: 25,
            xaxisScaleMin: 'mirror',
            backgroundGrid: false,
            yaxis: false,
            xaxis: false,
            xaxisScale: false,
            colors: ['#81A8BA']
        }
    }).draw();
</script>