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 straightforward - the vertical grid lines are turned off and the
colors are a custom set. There are 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).
<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="float: right"> <div style="width: 600px; height: 250px" id="chart-container"></div> </div>This is the code that generates the chart - it should be placed AFTER the
div
tag: