A simple SVG Line chart
View the bare-bones, stripped-down version of this demo
Here's a nice, simply-presented SVG Line chart. It has no
background grid, a large marginInner
setting (which was, until version 5.01, called hmargin
),
larger than usual text
and an extra little bit of text that's added after the chart
has been drawn. Because it's an SVG-based
chart this does not need to be added in the draw
event.
Even if it was canvas-based because there are no dynamic features (like tooltips) the chart is not
redrawn at all so technically, even with canvas, the draw
event would not need to be
used.
The chart has a responsive section that reduces the size of a few properties and also removes the
CSS float:
from the SVG tag.
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="float: right"> <div style="width:650px; height: 250px" id="chart-container"></div> </div>This is the code that generates the chart - it should be placed AFTER the
<div>
tag: