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 HBar charts - both of which are using the same SVG tag. You should note as well that whereas normally there's a positibe 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>