An SVG Bar chart with an offset X axis

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.

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="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','',''
            ],
            yaxisUnitsPre: '$',
            yaxisUnitsPost: 'k',
            yaxisDecimals: 1,
            strokestyle: 'rgba(0,0,0,0)',
            gutterLeft: 75,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            colors: ['#aaa'],
            yaxisMin: -50,
            yaxisMax: 200,
            title: 'A Bar chart with an offset X axis'
        }
    }).draw();
</script>