An SVG version of an older demo
An SVG version of an older filled spline Line chart. The chart uses gradients as the fill colors. There's also a key defined.
View the bare-bones, stripped-down version of this demo
This is an SVG version of an older canvas-based demo that has been updated to be a bit more up-to-date style-wise.
The vertical lines on the grid have been removed, the X and Y-axes have been removed and instead of being angular the line is now a spline (ie it's curvy).
Also, it now uses the trace() animation effect. The chart is filled and the
filledAccumulative option is set to true so that the three datasets are
stacked on top of each other.
Other than this there's a key, a title and the yaxisScaleUnitsPost has been set. The
chart is also responsive and on smaller screens, the size of the SVG tag is reduced, text size is
reduced and the CSS float is removed.
<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: 600px; height: 300px" id="cc"></div>This is the code that generates the chart - it should be placed AFTER the
<div> tag: