A floating Line chart
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).
responsive configuration reduces the size of the
SVG tag and removes the
canvas version of this chart in the download (called
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