FusionCharts Suite XT offers gauges that can be fed with real-time data periodically and can render the new data without a page refresh.

You can feed real-time data to a gauge in two ways:

• Using JavaScript API method

• Using server-side script

Using JavaScript API method

If new data is flowing into your system at client side, you can feed a gauge with the latest data using JavaScript API method.

A cylinder gauge fed with real-time data using a JavaScript API method is shown below:

The gauge is configured to show the current diesel level in a generator. The fuel level in the cylinder increases or decreases indicating the current diesel value marked on it. The real-time data is also displayed at the bottom of the cylinder after every preset interval is elapsed.

The code snippet to feed real-time data to the gauge using feedData() method is shown below:

// Initial value
"value": "110"
},
"events": {
    "rendered": function(evtObj, argObj) {
        var fuelVolume = 110;
        setInterval(function() {
            (fuelVolume < 10) ? (fuelVolume = 110) : "";
            var consVolume = fuelVolume - (Math.floor(Math.random() * 3));
            // feed data to the cylinder gauge, fuelMeter
            evtObj.sender.feedData("&value=" + consVolume);
            fuelVolume = consVolume;
        }, 1000); // set the refresh interval to 1000 ms
    }
}

You can feed data to the gauge in real time using the method, feedData(strData). The parameter strData is a string value that contains the real-time, latest data and can be fed to the gauge.

The time interval for the gauge update has to be defined in milliseconds.

Using server-side script

In instances where you have to monitor the status of an application/system constantly and the data is coming in from a server, you can use server-side scripts to poll the server for new data. This real-time data can be fed to a gauge to reflect the current status periodically.

An angular gauge updated with real-time data from a server is shown below:

In the above example, server CPU utilization of foods.hsm.com and garments.hsm.com is indicated on the angular gauge by two dials. The dial corresponding to the utilization of -

• foods.hsm.com is black

• garments.hsm.com is grey

The gauge is color-coded to indicate level of CPU utilizations as follows:

• Low - green

• Moderate - yellow

• High - red.

The gauge is configured to poll the server http://static.fusioncharts.com/sampledata/php/serverLoad.php every 5 seconds for the current utilization value through the datastreamURL parameter.

The server returns the new data for both sites to the gauge at once. This can be achieved by passing the data in a pipe separated form -

&value = 85|60

The dials pick up data sequentially and indicate the updated value on the gauge. The order of the dials is defined in the script. Here, the black dial (foods.hsm.com) points to 85 and the grey dial (garments.hsm.com) points to 60.

The refreshInterval has to be specified in seconds. The server page has to be on the same domain on which the gauge is hosted.

The data structure to set up the gauge using server-side script is shown below:

• JSON
• XML

Stopping/Restarting the real-time updates

You can stop the updates in two ways, depending on how the data is fed to the gauge:

• Using stopUpdate() method

• Using a command, stopUpdate from the server

Using stopUpdate() method

A thermometer gauge configured to stop and restart receiving real-time updates is shown below:

In the above example, the gauge reflects the current temperature at Central Cold Store. The real-time data is also displayed at the bottom of the thermometer. To stop updating the data, click Stop Update button. The gauge is not fed with real time data anymore. To resume real-time updates, click Restart Update button.

The JavaScript API methods to stop and restart real-time updates are as follows:

The data structure to stop and restart real-time updates is shown below:

• JSON
• XML

Using a command from the server

A real-time gauge stops polling the server for further updates when it receives the following command from the server:

&stopUpdate=1

After stopping the update, it can be restarted either using user interaction or using client-side JavaScript API method, restartUpdate() described earlier.