Updating your charts dynamically

How you can update your charts dynamically without refreshing the whole page. You can get new data in a variety of ways - AJAX is a common choice.

The example on the right shows a Line chart that automatically updates itself every 50 milliseconds. An ideal use for this could be showing a network's bandwidth usage or a server's load value.

This particular example shows a filled line chart.

To get up-to-date data from your server you could simply have the page refresh itself, storing the data on the server, or use AJAX if you want the data stored client-side or, like this example, the storage location doesn't strictly matter.

• Remember that browsers can slow down timers (ie setTimeout() calls) for background pages (eg minimised browsers). Google Chrome does this. If you use setInterval() instead of setTimeout() then it can cause "jumpiness" in updates and may also cause unexpected results.
• For long-running processes, you should not keep recreating the object. Here, the line chart is created once and stored on the window object (ie a global variable).
• Be careful of the data types you use to pass the data to RGraph - you should use numbers to represent values, not strings.

<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

<script>
    d1  = [0];
    l   = 0; // The letter 'L' - NOT a one
    obj = null;

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

    //
    // This function creates and configures the chart
    // and adds it to the window object. If the object
    // is already on the window object, though, it uses
    // that.
    //
    function getGraph(id, d1)
    {
        // After creating the chart, it's stored on the global
        // window object
        if (!window.obj) {
            window.obj = new RGraph.Line({
                id: id,
                data: d1,
                options: {
                    marginRight: 50,
                    backgroundColor: 'white',
                    backgroundGridVlines: false,
                    backgroundGridBorder: false,
                    title: 'Bandwidth used',
                    titleSize: 18,
                    titleBold: true,
                    titledsVpos: 0.5,
                    yaxis: false,
                    yaxisPosition: 'right',
                    yaxisScaleMax: 50,
                    yaxisLabelsCount: 2,
                    yaxisScaleUnitsPost: 'MB/s',
                    xaxisTickmarksCount: 0,
                    xaxisTickmarksLength: 5,
                    colors: ['#666'],
                    linewidth: 0.5,
                    filled: true,
                    tickmarksStyle: null
                }
            });

            // Create a gradient
            var grad = window.obj.context.createLinearGradient(0,0,0,250);
            grad.addColorStop(0, '#efefef');
            grad.addColorStop(0.9, 'rgba(0,0,0,0)');

            // Set the gradient as the charts fill color
            window.obj.set('filledColors', [grad]);
        }

        return window.obj;
    }






    //
    // The draw() function draws a single frame of the chart. It's
    // called repeatedly to get the scrolling effect.
    //
    function draw ()
    {
        // Clear the canvas in preparation for drawing a new
        // frame
        RGraph.clear(document.getElementById("cvs", 'white'));


        // Create the chart and draw it
        var graph = getGraph('cvs', d1);
        graph.draw();


        // Generate a random value that's close to the
        // last value of the current data
        var index = d1.length - 1;
        var r1 = RGraph.random(
            RGraph.isNull(d1[index]) ? 26 : d1[index] - 2,
            RGraph.isNull(d1[index]) ? 24 : d1[index] + 2
        );
        
        // Bounds checking for the new value
        r1 = Math.max(r1, 0);
        r1 = Math.min(r1, 50);

        // Add the new value on to the end of the data array
        d1.push(r1);
        
        // Ensure the array is at most 600 values
        while (d1.length > 600) {
            d1 = RGraph.arrayShift(d1);
        }

        // Set the new data on the Line chart object
        window.obj.original_data[0] = d1;
        
        // Call this function again in 50ms
        setTimeout(drawGraph, 50);
    }

    // Call the draw function to set things going
    draw();
</script>