This is an example of a Bar chart the has an offset Y axis. So the upper part of the chart is larger than the lower part. This allows you to give more focus to the upper portion of the chart - if that's where the majority of your data will be. It doesn't have to be this way - you can instead reverse the chart so that the lower portion of the chart is larger instead of the upper. There's also pre/post units on the scale along with decimals as well.
<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="padding: 15px"> <div style="width: 750px; height: 300px" id="chart-container"></div> </div>This is the code that generates the chart:
<script> new RGraph.SVG.Bar({ id: 'chart-container', data: [ 112,118,110,91,-49,0,0, 81,61,-11,51,-31,0,0, 51,61,-45,-38,-26,0,0, 58,84,54,63,35,0,0 ], options: { xaxisLabels: [ 'M','T','W','T','F','','', 'M','T','W','T','F','','', 'M','T','W','T','F','','', 'M','T','W','T','F','','' ], yaxisScaleUnitsPre: '$', yaxisScaleUnitsPost: 'k', yaxisScaleDecimals: 1, colorsStroke: 'rgba(0,0,0,0)', marginLeft: 75, backgroundGridVlines: false, backgroundGridBorder: false, colors: ['#aaa'], yaxisScaleMin: -50, yaxisScaleMax: 200, title: 'A Bar chart with an offset X axis' } }).draw(); </script>