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>
window.onload = function ()
{
var opacity = 1;
var 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,
fillstyle: ['rgba(0,0,255,1)','#fdd'],
labels: ['a','b','c','d','e','f','g','h','i','j'],
numxticks: 9,
tickmarks: null,
gutterBottom: 35,
textSize:14,
backgroundGridVlines: false,
backgroundGridBorder: false,
noxaxis: true,
textAccessible: true
}
}).draw();
for (var i=100; i>=0; i-=1) {
(function (idx)
{
var opacity = i * 0.01;
setTimeout(function () {line.set('fillstyle', ['rgba(0,0,255,' + opacity + ')','#fdd']); RGraph.redraw();}, (10 - idx) * 20);
})(i);
}
};
</script>