This is a regular Line chart with two datasets - however the fillcolor of the bottom most dataset has been set to transparent. The Line chart uses the spline setting and the trace effect. No axes are enabled and the vertical background grid lines have been disabled.
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 = [ 3,7,8,6,5,4,9,6, 7,8,5,7,8,6,5,7, 6,4,7,8,4,5,8,6,6 ]; 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>