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 (the labels are numbers - though this does NOT make it a scale. The Line chart X axis is NOT scaled).
The responsive configuration reduces the size of the SVG tag and removes the CSS float.
Note: There's a canvas version of this chart in the download (called demos/line-nvd.html) where the datasets are traced sequentially (so the datasets are traced one-at-a-time and when one dataset finishes tracing the next starts).
This goes in the documents header:<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: