This is a demo page that shows the various combinations of the Bar chart scale when used as a regular (not grouped or stacked) chart. A chart with the Y axis in the center is shown as well as a chart with an offset axis.
This goes in the documents header:<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.bar.js"></script>Put this where you want the chart to show up:
<div style="width: 600px; height: 250px" id="chart-container1"></div></div> <div style="width: 600px; height: 250px" id="chart-container2"></div></div> <div style="width: 600px; height: 250px" id="chart-container3"></div></div> <div style="width: 600px; height: 250px" id="chart-container4"></div></div> <div style="width: 600px; height: 250px" id="chart-container5"></div></div>This is the code that generates the chart:
<script> new RGraph.SVG.Bar({ id: 'chart-container1', data: [-5,-7,-9,-11,-13,-15], options: { yaxisScaleMax: -5, yaxisScaleMin: -15, marginLeft: 50, xaxisLabels: ['Harry','Lucy','Pete','Nick','Al','John'], title: 'Both min and max negative', hmargin: 20, backgroundGridVlines: false, backgroundGridBorder: false, xaxis: false, yaxis: false } }).draw(); new RGraph.SVG.Bar({ id: 'chart-container2', data: [0,1,2,3,4,5,6], options: { marginLeft: 50, xaxisLabels: ['Harry','Lucy','Pete','Nick','Al','John','Kevin'], title: 'Min set to zero and max positive', hmargin: 20, backgroundGridVlines: false, backgroundGridBorder: false, xaxis: false, yaxis: false } }).draw(); new RGraph.SVG.Bar({ 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: { yaxisScaleMin: 'mirror', xaxisLabels: ['Harry','Lucy','Pete','Nick','Al','John','Kerridge'], title: 'Min negative and max positive', backgroundGridVlines: false, backgroundGridBorder: false, yaxis: 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.Bar({ id: 'chart-container4', data: [5,6,7,8,9,10], options: { title: 'Both min and max above zero', xaxisLabels: ['Ken','Larry','Kevin','Jobe','Lucy','John'], marginLeft: 50, yaxisScaleMin: 5, yaxisScaleMax: 10, backgroundGridBorder: false, backgroundGridVlines: false, xaxis: false, yaxis: false } }).draw(); new RGraph.SVG.Bar({ id: 'chart-container5', data: [-5,-6,-7,-8,-9,-10], options: { title: 'Zero max and negative min', xaxisLabels: ['Ken','Larry','Kevin','Jobe','Lucy','John'], marginLeft: 50, yaxisScaleMin: -10, yaxisScaleMax: 0, backgroundGridBorder: false, backgroundGridVlines: false, xaxis: false, yaxis: false } }).draw(); </script>