An example of the Darwin Oscillation index. Whether that's a real thing - who knows! But the chart is a simple one having no background grid, a center X axis and the colors have been created such that positive values have a red color and negative values are colored blue. There's also no hmargin so that the bars appear without a gap between them.
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, yaxisScaleDecimals: 1, yaxisScaleMax: 3, yaxisScaleMin: 'mirror', backgroundGrid: false, colors: colors, colorsSequential: true, title: 'Darwin Southern Oscillation Index' } }).grow(); </script>