There's a few Horizontal Bar charts on this page that all demonstrate the various scale combinations that you can have with the grouped HBar chart.
<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="width: 400px; height: 450px" id="chart-container1"></div></div> <div style="width: 400px; height: 450px" id="chart-container2"></div></div> <div style="width: 500px; height: 550px" id="chart-container3"></div></div> <div style="width: 500px; height: 450px" id="chart-container4"></div></div> <div style="width: 500px; height: 450px" id="chart-container5"></div></div>This is the code that generates the chart:
<script> new RGraph.SVG.HBar({ id: 'chart-container1', data: [[-5,-6],[-7,-8],[-9,-10],[-11,-12],[-13,-14],[-15,-15]], options: { xaxisScaleMax: -5, xaxisScaleMin: -15, yaxisLabels: ['Harry','Lucy','Pete','Nick','Al','John'], title: 'Both min and max negative', vmargin: 10, backgroundGridHlines: false, backgroundGridBorder: false, marginRight: 50, marginLeft: 10, marginLeftAutosize: false } }).draw(); new RGraph.SVG.HBar({ id: 'chart-container2', data: [[1,2],[3,4],[5,6]], options: { yaxisLabels: ['Harry','Lucy','Pete'], title: 'Min set to zero and max positive', vmargin: 25, backgroundGridHlines: false, backgroundGridBorder: false } }).draw(); new RGraph.SVG.HBar({ id: 'chart-container3', data: [[10,9,8],[7,6,5],[4,3,2],[1,0,-1],[-2,-3,-4],[-5,-6,-7],[-8,-9,-10]], options: { xaxisScaleMin: 'mirror', yaxisLabels: [ 'Harry','Lucy','Pete','Nick','Al','John','Kerridge', 'Harry','Lucy','Pete','Nick','Al','John','Kerridge', 'Harry','Lucy','Pete','Nick','Al','John','Kerridge' ], title: 'Min negative and max positive', backgroundGridHlines: false, backgroundGridBorder: false, colors: [ 'red', 'blue','green', 'red', 'blue','green', 'red', 'blue','green', 'red', 'blue','green', 'red', 'blue','green', 'red', 'blue','green', 'red', 'blue','green' ], colorsSequential: true, } }).draw(); new RGraph.SVG.HBar({ id: 'chart-container4', data: [[5,6,7],[8,9,10]], options: { title: 'Both min and max above zero', yaxisLabels: ['Ken','Larry','Kevin','Jobe','Lucy','John'], xaxisScaleMin: 5, xaxisScaleMax: 10, backgroundGridBorder: false, backgroundGridHlines: false } }).draw(); new RGraph.SVG.HBar({ id: 'chart-container5', data: [[-1,-2,-3],[-4,-5,-6],[-7,-8,-9],[-10,-10,-10]], options: { marginLeftAutosize: false, marginLeft: 10, marginRight: 75, title: 'Zero max and negative min', yaxisLabels: ['Ken','Larry','Kevin','Charles'], xaxisScaleMin: -10, xaxisScaleMax: 0, vmargin: 25, backgroundGridBorder: false, backgroundGridHlines: false } }).draw(); </script>