# An SVG Bar chart showing the Darwin Southern Oscillation Index

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: 750px; height: 300px" id="chart-container"></div>

This is the code that generates the chart:

    <script>
        data   = [];
        colors = [];

        // Create the data
        for (var i=0; i<150; i++) {
            data[i] = RGraph.SVG.random(-2000,2000) / 1000;
        }

        // Create the colors
        data.forEach(function (v, k, arr)
        {
            colors[k] = v < 0 ? 'blue' : 'red';
        });

        new RGraph.SVG.Bar({
            id: 'chart-container',
            data: data,
            options: {
                hmargin: 0,
                xaxisTickmarks: false,
                yaxisDecimals: 1,
                yaxisMax: 3,
                yaxisMin: 'mirror',
                backgroundGrid: false,
                colors: colors,
                colorsSequential: true,
                title: 'Darwin Southern Oscillation Index'
            }
        }).grow();
    </script>

« Back