This range chart is a little different from the others as the datasets are organised a little differently. The first dataset that you give to the Line chart becomes the bottom dataset and is an absolute set of values - in the example here the first number is 4.
The second dataset, which is the top line, is additive/accumulative. In this case the first point of the second dataset is 1. So added to the first point of the first dataset (which was 4) you get a total of 5 - which is the figure that is shown on the chart.
The reason for this is because the spline range chart is really a stacked spline chart - but with the bottom dataset using transparent as its color - so you can't see it.
This is shown below by gradually changing the color of the "bottom" dataset from blue to transparent.
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.line.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="250"> [No canvas support] </canvas>This is the code that generates the chart:
<script> opacity = 1; line = new RGraph.Line({ id: 'cvs', data: [ [4,6,16,15,13,14,18,15,18,16], [1,1,1,2,3,5,9,9,6,3] ], options: { spline: true, filled: true, colors: ['red'], shadow: false, filledColors: ['rgba(0,0,255,1)','#fdd'], xaxisLabels: ['a','b','c','d','e','f','g','h','i','j'], xaxisTickmarksCount: 9, tickmarksStyle: null, marginBottom: 35, textSize:14, backgroundGridVlines: false, backgroundGridBorder: false, xaxis: false } }).draw(); for (var i=10; i>=0; i-=1) { (function (idx) { var opacity = i * 0.1; setTimeout(function () { line.set('filledColors', ['rgba(0,0,255,' + opacity + ')','#fdd']); RGraph.redraw(); }, (10 - idx) * 100); })(i); } </script>