An HBar chart with a mirrored scale

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: {
            gutterLeft: 75,
            gutterLeftAutosize: false,
            xaxisMax: 25,
            xaxisMin: 'mirror',
            backgroundGridHlines: false,
            backgroundGridVlines: false,
            yaxisColor: 'gray',
            xaxis: false,
            xaxisLabelsCount: 10,
            xaxisFormatter: 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: {
            gutterLeft: 75,
            gutterLeftAutosize: false,
            xaxisMax: 25,
            xaxisMin: 'mirror',
            backgroundGrid: false,
            yaxis: false,
            xaxis: false,
            xaxisScale: false,
            colors: ['#81A8BA'],
            attribution: false
        }
    }).draw();
</script>

« Back