This is a demo of a Line chart that was "inspired" by an example that was
showcased on the NVD website. It's a filled Line chart that has the
filledAccumulative
and the spline
options enabled. And
importantly, the first color for the chart is transparent - making it seem
like the rest of the datasets are "floating". The rest of the configuration
is quite straight-forward - the vertical grid lines are turned off and the
colors are a custom set. There's also labels specified.
<script src="../libraries/RGraph.svg.common.core.js" ></script> <script src="../libraries/RGraph.svg.line.js" ></script>Put this where you want the chart to show up:
<div style="width: 950px; height: 250px" id="chart-container"></div>This is the code that generates the chart:
<script> new RGraph.SVG.Line({ id: 'chart-container', data: [ [84,65,3,15,12,22,95,5,35,45,85,85,23,45,62,52,45,31,53,66], [64,12,56,25,20,80,85,61,81,56,45,32,91,52,86,23,45,56,51,48], [48,5,23,12,16,36,49,130,52,95,45,21,65,35,28,75,59,74,86,23], [95,65,32,12,100,8,152,63,52,54,85,45,12,13,15,32,64,84,54,66] ], options: { filled: true, filledAccumulative: true, colors: [ 'rgba(0,0,0,0)', '#FDA354', '#C4D6ED', '#609EC8' ], spline: true, backgroundGridVlines: false, backgroundGridBorder: false, xaxis: false, yaxis: false, xaxisLabels: ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20'] } }).trace(); </script>