An SVG Bar chart showing income/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.yaxisMax       = 10;
    RGraph.SVG.GLOBALS.yaxisMin       = '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>