A dynamically updating Line

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:

<script>
    // Define some variables
    var div       = document.getElementById("cc"),
        obj       = null,
        data      = [],
        
        // The letter 'L' - NOT a one
        l         = 0,

        numvalues = 1200,
        updates   = 0;

    // Pre-pad the data array with null values
    for (var i=0; i<numvalues; ++i) {
        data.push(null);
    }

    // This function is called repeatedly to draw the Line chart.
    // It only creates the Line chart object once and then stores
    // it in a global variable. On subsequent calls (this function
    // gets called 60 times per second) this global variable is
    // used instead of creating the entire Line chart again.
    function drawGraph ()
    {
        // Create the Line chart if the global variable 'obj'
        // doesn't exist.
        if (!obj) {
            
            // The Line chart is configured to be quite minimal in appearance.
            // Of course the less drawing that has to be done the smoother
            // the updates.
            obj = new RGraph.SVG.Line({
                id: 'cc',
                data: data,
                options: {
                    colors: ['black'],
                    linewidth: 0.75,
                    shadow: false,
                    marginTop: 10,
                    marginBottom: 15,
                    marginRight: 40,
                    backgroundGrid: false,
                    xaxisTickmarks: 0,
                    xaxisLinewidth: 2,
                    yaxisTickmarks: 0,
                    yaxisLinewidth: 2
                }
            }).responsive([
                {maxWidth: null,width:650,height:250,options:{textSize:16},parentCss:{textAlign:'none','float':'right'}},
                {maxWidth: 900, width:400,height:150,options:{textSize:12},parentCss:{textAlign:'center','float':'none'}}
            ]);
        
        // If the chart has already been created then clear the SVG
        } else {
            RGraph.SVG.clear(obj.svg);
        }

        // Add some random data to the data array. The data is such that each
        // point is only a few units higher or lower than the previous.
        var len          = data.length,
            lastvalue    = RGraph.SVG.isNull(data[len - 1]) ? 26 : data[len - 1],
            random_value = RGraph.SVG.random({
                min: lastvalue  - 2,
                max: lastvalue + 2
            });
       
       // The random value is constrained to a minimum of 0 and a
       // maximum of 250.
       random_value = Math.max(random_value, 0);
       random_value = Math.min(random_value, 250);

        // Add the random value to the data
        data.push(random_value);
        
        // If the number of points in the data is greater than the numvalues
        // variable take a point off of the front of the array.
        if (data.length > numvalues) {
            data.shift();
        }

        // Give the data to the Line chart and redraw the chart.
        obj.originalData[0] = data;
        obj.draw();
        
        // Call this function again after a small delay.
        setTimeout(drawGraph, 16.666);
    }
    
    // This sets everything going
    drawGraph();
</script>