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: