Active Graphs and Charts - Graphs that Automatically Update

Getting Started

Documentation

Tutorials

Examples

Setting the Graph to Automatically Update

Here we show how to implement the graphing software so that it automatically updates without refreshing the page.

The graph below is set to plot temperature over time. The graph will acquire a new value from the server every second.

Configure the Graph

The first step is to configure the graph software to request the properties from a server script. This is done with the parameter 'JpGraphPropertyFile'. Here is the configuration used for this graph:-

    var thegraph;
    var data = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10);
    
    window.onload = function () 
    {      
        var graphdata = ({series1data : data});
            
        /**
         * draw the graph
         */
        thegraph = new JpGraph('line',
                               'graph',
                               graphdata,
                               {
                                width                 : 800,
                                height                : 300,
                                JpGraphPropertyFile   : './scripts/temp-props.php',
                               });
                               
        setTimeout('getData()', 1000);        
    }

The Property Script

For this example we have created the property script with PHP. The server side script can be written in any server side language.

The script is fairly straight forward and performs the following steps:-

Calculate 20 seconds back from the current time
Format the times
Output the X axis labels

<?php
/**
 * Generating Dynamic Time Labels for the Temperature chart
 *
 * This sample script generates second time labels for the X axis
 */

/*
 * work out the times and place into
 * an array
 */
$labels = array();
$startTimestamp = strtotime("-20 seconds");
for ($i=0; $i<20; $i++)
{
    $labels[$i] = date("g:i:s", strtotime("+" . $i . " seconds" , $startTimestamp) );
} 

/*
 * build the output string
 */
$xlabels = "";
for ($i=0; $i<20; $i++)
{
    $xlabels .= $labels[$i] . "|";
}

/*
 * output the date labels
 */
echo "xLabels = " . $xlabels . PHP_EOL;
?>

The Data Function

Notice above we have used the javascript setTimeout function to call a getData() function after 1 second. The getData() function will issue a request to the server to get the latest temperature value and then issue commands to the graph object to set the new data.

    function getData() 
    {
        /*
         * make an Ajax call to the server
         * to get the new temperature value
         */
        responseValue = getSyncValue('./scripts/temperatureData.php?value=' + data[19]);
        for (i=1; i<20; i++)
        {
            data[i-1] = data[i];
        }
        data[19] = responseValue;
       
        /*
         * update the graph
         */
        var graphdata = ({series1data : data}); 
        thegraph.setData(graphdata);
        thegraph.redraw();
       
        /* 
         * poll again in 1 second
         */
        setTimeout('getData()', 1000);
        return true;
    }

The Temperature Data Script

This is a simple server side script which generate a temperature value upon request. The graph will poll this script every second to acquire a new data point to add to the chart.

<?php
$value = isset($_REQUEST["value"]) ? $_REQUEST["value"] : 10; 
$value += (rand(-30 ,30))/10;
if ($value > 39)
{
    $value = 39 - (rand(10 ,30))/10;
}
if ($value < -10)
{
    $value = -10 + (rand(10 ,30))/10;;
}
echo $value;
exit(0);
?>

back to tutorial index