Accomplished by using a stacked filled Line chart with the color of the bottom fill being transparent.
This goes in the documents header:<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.line.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>
d1 = [
1,5,6,4,3,2,7,4,
5,6,3,5,6,4,3,5,
4,2,5,6,2,3,6,4, 4
];
d2 = [];
d1.forEach(function (v, k, arr)
{
d2[k] = v + RGraph.SVG.random(1,5);
});
new RGraph.SVG.Line({
id: 'chart-container',
data: [d1, d2],
options: {
xaxisLabels: [
'00','01','02','03','04','05','06','07',
'08','09','10','11','12','13','14','15',
'16','17','18','19','20','21','22','23',
'00'
],
filled: true,
filledColors: ['transparent', 'rgba(0,255,0,0.25'],
filledAccumulative: true,
colors: ['green', 'green'],
spline: true,
linewidth: 2,
backgroundGridVlines: false,
backgroundGridBorder: false,
xaxis: false,
yaxis: false
}
}).trace();
</script>