A page that's showing the various Y scale combinations of the Bar chart axes - such as positive min/max, negative min/max and postive max/negative min. Other than this the Bar charts are pretty basic - it's just a demonstration of the different scale combinations on a grouped chart.
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> <div style="width: 600px; height: 250px" id="chart-container6"></div></div>This is the code that generates the chart:
<script> bar = new RGraph.SVG.Bar({ id: 'chart-container1', data: [[-5,-5],[-7,-7],[-9,-9],[-11,-11],[-13,-13],[-15,-15]], options: { xaxisLabels: ['Harry','Bill','Pete','Lou','Kev','Bob'], title: 'Negative min and max', yaxisScaleMax: -5, yaxisScaleMin: -15, marginLeft: 50 } }).draw(); bar = new RGraph.SVG.Bar({ id: 'chart-container2', data: [[0,0],[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9]], options: { xaxisLabels: ['Harry','Bill','Pete','Lou','Kev','Bob','Masy','Olga','Gile','Jill'], title: 'Zero min and positive max', marginLeft: 50, yaxisScaleMin: 0, yaxisScaleMax: 10 } }).draw(); bar = new RGraph.SVG.Bar({ id: 'chart-container3', data: [[10,10],[9,9],[8,8],[7,7],[6,6],[5,5],[4,4],[3,3],[2,2],[1,1],[0,0],[-1,-1],[-2,-2],[-3,-3],[-4,-4],[-5,-5],[-6,-6],[-7,-7],[-8,-8],[-9,-9],[-10,-10],], options: { xaxisLabels: ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U'], title: 'Negative min and positive max', marginLeft: 50, yaxisScaleMin: 'mirror' } }).draw(); bar = new RGraph.SVG.Bar({ id: 'chart-container4', data: [5,6,7,8,9,10], data: [[5,5],[6,6],[7,7],[8,8],[9,9],[10,10]], options: { xaxisLabels: ['A','B','C','D','E','F'], title: 'Positive min and positive max', marginLeft: 50, yaxisScaleMin:5, yaxisScaleMax: 10 } }).draw(); bar = new RGraph.SVG.Bar({ id: 'chart-container5', data: [[-9,-1],[-1,-2],[-6,-3],[-7,-4]], options: { xaxisLabels: ['A','B','C','D'], title: 'Zero max and negative min', marginLeft: 50, yaxisScaleMin:-10, yaxisScaleMax: 0 } }).draw(); bar = new RGraph.SVG.Bar({ id: 'chart-container6', data: [[9,-10],[1,2],[6,13],[17,14],[-10,-8]], options: { xaxisLabels: ['A','B','C','D', 'E'], title: 'Negative min, positive max, offset axis', marginLeft: 50, yaxisScaleMin:-10, yaxisScaleMax: 40 } }).draw(); </script>