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