Updating your charts dynamically

The example on the right shows a line chart that automatically updates itself every 25 milliseconds. An ideal use for this could be showing a networks bandwidth usage, or a servers load value.

This particular example shows a stacked line chart with two data series, though if you're showing load/stress values, a non-filled chart might be a better choice.

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.

If you're refreshing the chart often, as it is here, refreshing the whole page probably isn't the best idea, so AJAX may be the better choice.

Be careful of the data types you use to pass the data to OfficeExcel - you should use numbers to represent values, not strings.

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

<script>
    d1 = [];
    d2 = [];
    
    // Pre-pad the arrays with 250 null values
    for (var i=0; i< 250; ++i) {
        d1.push(null);
        d2.push(null);
    }

    function getGraph(id, d1, d2)
    {
        var graph = new OfficeExcel.Line(id, d1, d2);
        graph.Set('chart.background.barcolor1', 'white');
        graph.Set('chart.background.barcolor2', 'white');
        graph.Set('chart.title.xaxis', 'Time');
        graph.Set('chart.filled', true);
        graph.Set('chart.fillstyle', ['#daf1fa', '#faa']);
        graph.Set('chart.colors', ['rgb(169, 222, 244)', 'red']);
        graph.Set('chart.linewidth', 3);
        graph.Set('chart.ymax', 20);
        graph.Set('chart.xticks', 25);

        return graph;
    }
    
    function drawGraph (e)
    {
        // Clear the canvas and redraw the chart
        OfficeExcel.Clear(document.getElementById("cvs"));
        var graph = getGraph('cvs', d1, d2);
        graph.Draw();
        
        // Add some data to the data arrays
        d1.push(OfficeExcel.random(5, 10));
        d2.push(OfficeExcel.random(5, 10));
        
        // Get rid of the first values of the arrays
        if (d1.length > 250) {
            d1 = OfficeExcel.array_shift(d1);
            d2 = OfficeExcel.array_shift(d2);
        }

        setTimeout(drawGraph,25);
    }
    
    drawGraph();
</script>