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: