Active Graphs and Charts

Active Graphs and Charts


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:-

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:-

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.

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.

back to tutorial index