Setting Up Real-time Gauges
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 Methods
If new data is flowing into your system at client side, 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.
A cylinder gauge fed with real-time data using the feedData() method is shown below:
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'cylinder',
dataFormat: 'json',
id: 'fuelMeter',
renderAt: 'chart-container',
width: '200',
height: '350',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Diesel Level in Generator",
"subcaption": "Bakersfield Central",
"lowerLimit": "0",
"upperLimit": "120",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": " ltrs",
"showValue": "1",
"chartBottomMargin": "25"
},
// initial value to be fed to the gauge
"value": "110"
},
"events": {
"rendered": function(evtObj, argObj) {
var fuelVolume = 110;
evtObj.sender.chartInterval = 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
},
"disposed": function(evt, arg) {
clearInterval(evt.sender.chartInterval);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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. Current 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 the 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
}
}The time interval for the gauge update has to be defined in milliseconds.
Using Server-side Scripts
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:
{
"chart": {
"caption": "Server CPU Utilization",
"subcaption": "foods.hsm.com & garments.hsm.com",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"dataStreamUrl": "../../../resources/php/advanced-charting-real-time-gauges-setting-up-real-time-gauges-php-1.php",
"refreshInterval": "5",
"theme": "fint"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#1aaf5d"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f2c500"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#c02d00"
}
]
},
"dials": {
"dial": [
{
"id": "fd_dial",
"value": "72.5",
"tooltext": "foods.hsm.com : $value"
},
{
"id": "clth_dial",
"value": "64.8",
"alpha": "40",
"tooltext": "garments.hsm.com : $value"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'angulargauge',
renderAt: 'chart-container',
id: 'cs-angular-gauge',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Server CPU Utilization",
"subcaption": "foods.hsm.com & garments.hsm.com",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"dataStreamUrl": "../../../resources/php/advanced-charting-real-time-gauges-setting-up-real-time-gauges-php-1.php",
"refreshInterval": "5",
"theme": "fint"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#1aaf5d"
}, {
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f2c500"
}, {
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#c02d00"
}]
},
"dials": {
"dial": [{
"id": "fd_dial",
"value": "72.5",
"tooltext": "foods.hsm.com : $value"
}, {
"id": "clth_dial",
"value": "64.8",
"alpha": "40",
"tooltext": "garments.hsm.com : $value"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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 black dial shows the CPU utilization of the former and the gray dial shows the CPU utilization of the later website.
The gauge is color-coded to indicate levels of CPU utilization as follows:
-
Low - green
-
Moderate - yellow
-
High - red.
The gauge is configured to poll the server at http://static.fusioncharts.com/sampledata/php/serverLoad.php every 5 seconds for the current utilization value through the datastreamURL parameter.
The server page has to be on the same domain on which the gauge is hosted.
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, as shown below:
&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 points to 85 and the gray dial points to 60.
The refreshInterval has to be specified in seconds.
Stopping/Restarting Real-time Updates
You can stop real-time updates in two ways:
-
Using
stopUpdate()method-when thefeedData()method is used to fetch real-time data -
Using the
stopUpdatecommand from the server-when a server-side script is used to fetch real-time data
Using the stopUpdate() Method
A thermometer gauge configured to stop and restart receiving real-time updates is shown below:
{
"chart": {
"caption": "Temperature Monitor",
"subcaption": " Central cold store",
"lowerLimit": "-10",
"upperLimit": "0",
"numberSuffix": "°C",
"decimals": "1",
"showhovereffect": "1",
"thmFillColor": "#008ee4",
"showGaugeBorder": "1",
"gaugeBorderColor": "#008ee4",
"gaugeBorderThickness": "2",
"gaugeBorderAlpha": "30",
"thmOriginX": "100",
"dataStreamURL": "../../../resources/php/advanced-charting-real-time-gauges-setting-up-real-time-gauges-php-2.php",
"refreshInterval": "5",
"theme": "fint"
},
"value": "-6"
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'thermometer',
renderAt: 'chart-container',
id: 'myThm',
width: '240',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Temperature Monitor",
"subcaption": " Central cold store",
"lowerLimit": "-10",
"upperLimit": "0",
"numberSuffix": "°C",
"decimals": "1",
"showhovereffect": "1",
"thmFillColor": "#008ee4",
"showGaugeBorder": "1",
"gaugeBorderColor": "#008ee4",
"gaugeBorderThickness": "2",
"gaugeBorderAlpha": "30",
"thmOriginX": "100",
"dataStreamURL": "../../../resources/php/advanced-charting-real-time-gauges-setting-up-real-time-gauges-php-2.php",
"refreshInterval": "5",
"theme": "fint"
},
"value": "-6"
},
"events": {
'beforeRender': function(evt, args) {
// creating div for controllers
var controllers = document.createElement('div');
// Create radio buttons inside div
controllers.innerHTML = '<input type="button" value="Stop Update" id="btnSU" style="margin-left:5px;padding-botom:15px;"/><div id="buttonDiv" style="padding-top: 13px;"></div>';
// set css style for controllers div
controllers.style.cssText = '';
args.container.appendChild(controllers);
controllers.setAttribute('id', 'controllers');
},
"renderComplete": function(evtObj, argObj) {
flag = 0;
function stopStartUpdate() {
if (flag === 0) {
document.getElementById('btnSU').value = "Restart Update";
FusionCharts.items['myThm'].stopUpdate();
flag = 1;
} else {
document.getElementById('btnSU').value = "Stop Update";
FusionCharts.items['myThm'].restartUpdate();
flag = 0;
}
}
document.getElementById("btnSU").addEventListener("click", stopStartUpdate);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>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. The gauge is not fed with real time data anymore. To resume real-time updates, click Restart Update.
The JavaScript API methods to stop and restart real-time updates are as follows:
| Method | Description |
|---|---|
|
Stops the real-time updates |
|
Restarts the real-time updates |
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:
After stopping the update, it can be restarted either using user interaction or using the client-side JavaScript API method, restartUpdate(), described earlier.