A Waterfall chart using the grow() effect

[No canvas support]

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.waterfall.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>
This is the code that generates the chart:
<script>
    new RGraph.Waterfall({
        id: 'cvs',
        data: [50,12,-50,-19, -130, -30],
        options: {
            backgroundGridHlinesCount: 4,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            title: 'A chart showing income/expenditure',
            titleY: 10,
            colors: ['black','red','blue'],
            colorsStroke: 'white',
            yaxisLabelsCount: 2,
            yaxisScaleUnitsPre: '$',
            yaxisTickmarksCount: 4,
            total: true,
            xaxisLabels: ['Sales', 'Misc', 'Wages','Fees','Supplies','Food','Gross'],
            tooltips: [
                'Total sales of products and services rendered',
                'Miscellaneous income',
                'Wages provided to the staff',
                'Fees (eg bank transactions)',
                'Supplies to the office and daily running costs',
                'Food to keep the staff alive and running at peak efficiency',
                'Gross income before any taxes have been paid'
            ],
            highlightStroke: 'rgba(0,0,0,0)',                
            // In older versions of Firefox this seriously slows down the grow() animation
            shadowColor: '#aaa',
            shadowBlur: 5,
            shadowOffsetx: 0,
            shadowOffsety: 0,
            marginLeft: 70,
            textSize: 12,
            xaxisPosition: 'center'
        }
    }).grow();
</script>