Looking for a web developer?

An SVG Waterfall chart with an offset X axis

This is an example of a Waterfall chart which has an offset Y axis so that it can show some negative values. As you can see the Waterfall chart also has support for the labelsAbove option. The total column at the end is opyional and does not have to be shown if you don't want it.

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.waterfall.js"></script>
Put this where you want the chart to show up:
<div style="width: 1000px; height: 300px" id="chart-container"></div>
This is the code that generates the chart:
    new RGraph.SVG.Waterfall({
        id: 'chart-container',
        data: [4,8,6,-5,-4,5,-18],
        options: {
            strokestyle: 'transparent',
            strokestyleConnector: '#ccc',
            yaxisMin: -5,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            yaxis: false,
            colors: ['black','#c00','red'],
            xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday','Result'],
            labelsAboveUnitsPost: ' units',
            labelsAboveLastBold: true,
            labelsAboveSize: 10,
            title: 'Widgets in stock on Saturday'