An SVG Bar chart showing income and expenditure

There's also a canvas version of this chart. Here we have an effective visualisation that shows the income and expenditure figures for a company. It's actually made up of two Bar charts - one for the top figures and one for the bottom which are being drawn on the same SVG tag.

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: 650px; height: 250px" id="cc"></div>
This is the code that generates the chart:
<script>
    var data1 = [[4,8,6],[1,5,8],[4,9,6]],
        data2 = [[-5,-5,-6],[-1,-4,-9],[-2,-3,-5]];
    

    RGraph.SVG.GLOBALS.hmargin        = 25;
    RGraph.SVG.GLOBALS.hmarginGrouped = 5;
    RGraph.SVG.GLOBALS.yaxisScaleMax  = 10;
    RGraph.SVG.GLOBALS.yaxisScaleMin  = 'mirror';


    new RGraph.SVG.Bar({
        id: 'cc',
        data: data1,
        options: {
            xaxis: false,
            yaxis: false,
            colors: [
                'Gradient(black:#aaa:black)',
                'Gradient(black:#aaa:black)',
                'Gradient(black:#aaa:black)'
            ]
        }
    }).wave();

    new RGraph.SVG.Bar({
        id: 'cc',
        data: data2,
        options: {
            yaxisLabels: false,
            backgroundGrid: false,
            colors: [
                'Gradient(red:#faa:red)',
                'Gradient(red:#faa:red)',
                'Gradient(red:#faa:red)'
            ]
        }
    }).wave();
</script>