A dynamically updating Line

View the bare-bones version of this demo with any interactive features or animations enabled

This is an SVG version of an older dynamic canvas Line chart. There are lots of data points in the dataset (1200) and new ones are added every 16.666 milliseconds (ie 60 frames per second).

It's purposefully not a complicated chart so that there's not much to do on each redraw. So there's no vertical grid lines or grid border, no X-axis and no shadows.

The chart is created only once inside the drawGraph function and then on each iteration, a new value is added to the line.originalData variable.

The new value that's added is generated randomly but is constrained to only be a few units higher or lower than the last value in the dataset. This prevents there being large jumps in the data when new values are added.

There's not a lot to do for smaller screens. The size of the chart is reduced, the labels are switched to use two lines and the alignment of the SVG tag is altered so that it's centered.

This goes in the documents header:

<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="float: right" id="outer-container">
    <div style="width: 650px; height: 250px" id="cc"></div>
</div>

This is the code that generates the chart - it should be placed AFTER the div tag: