# An SVG Bar chart showing income/expenditure

- There's also a canvas version of this chart.

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>

« Back