Real-time Bulb Gauge
The bulb gauge is a real-time chart, which can continuously request new data from the server and display the same, without involving any page refreshes. The chart initializes itself, loads new data periodically, and auto-updates to reflect the current state of data. There are two different ways to update the bulb gauge; one method directly polls data from the server while the other retrieves data using JavaScript API methods.
In this section, you will be shown how you can,
Configuring Real-time Updates Using JavaScript API
Real-time Data Format
The data provider page on the server’s end, when invoked by the bulb gauge, will output the new data in the real-time data format.
The real-time data format for gauges depends on:
-
the value to be passed
-
whether you are using the message logger for the gauge
-
the use of commands for the gauge - like stop update etc.
In the simplest form, if you’re looking to update the bulb gauge, you need to output the data in the following format:
Here, the output is a single value, -5. So, when the gauge will read this value, it will update the chart by setting its value to 25 (if a data range is provided by the gauge, the value will first be checked to verify if it falls within the defined range).
A bulb gauge configured for real-time updates using JavaScript API looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Temperature status of deep freezers",
"upperlimit": "-5",
"lowerlimit": "-60",
"captionPadding": "30",
"showshadow": "0",
"showvalue": "1",
"useColorNameAsValue": "1",
"placeValuesInside": "1",
"valueFontSize": "16",
"plottooltext": "Current Temperature:$value°C",
"theme": "fint"
},
"colorrange": {
"color": [
{
"minvalue": "-60",
"maxvalue": "-35",
"label": "Mission control,{br}we have a situation!",
"code": "#ff0000"
},
{
"minvalue": "-35",
"maxvalue": "-25",
"label": "Something is just not right!",
"code": "#ff9900"
},
{
"minvalue": "-25",
"maxvalue": "-5",
"label": "All well ahoy!",
"code": "#00ff00"
}
]
},
"value": "-5"
}<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: 'bulb',
renderAt: 'chart-container',
id: 'myChart',
width: '300',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Temperature status of deep freezers",
"upperlimit": "-5",
"lowerlimit": "-60",
"captionPadding": "30",
"showshadow": "0",
"showvalue": "1",
"useColorNameAsValue": "1",
"placeValuesInside": "1",
"valueFontSize": "16",
//Tooltext
"plottooltext": "Current Temperature:$value°C",
//Theme
"theme": "fint"
},
"colorrange": {
"color": [{
"minvalue": "-60",
"maxvalue": "-35",
"label": "Mission control,{br}we have a situation!",
"code": "#ff0000"
}, {
"minvalue": "-35",
"maxvalue": "-25",
"label": "Something is just not right!",
"code": "#ff9900"
}, {
"minvalue": "-25",
"maxvalue": "-5",
"label": "All well ahoy!",
"code": "#00ff00"
}]
},
"value": "-5"
},
"events": {
"rendered": function(evtObj, argObj) {
evtObj.sender.chartInterval = setInterval(function() {
var num = (Math.floor(Math.random() * 55) * -1) - 5;
FusionCharts("myChart").feedData("&value=" + num);
}, 10000);
},
"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>Given below is a brief description of the JavaScript API used to configure real-time updates:
| Function Name | Parameter | Description |
|---|---|---|
|
strData |
This method is used to feed real-time data to the gauge using JavaScript. The data has to be in the same format as provided by the real-time data provider page. |
|
None |
This method is used to return the data currently being shown by the gauge. |
|
value |
This method is used to set the data value for the gauge. The value should be within the limits of the gauge. |
Configuring Real-time Updates Using Server-side Scripts
A bulb gauge configured for real-time updates using server-side script looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Temperature status of deep freezers",
"upperlimit": "-5",
"lowerlimit": "-60",
"captionPadding": "30",
"showshadow": "0",
"showvalue": "1",
"useColorNameAsValue": "1",
"placeValuesInside": "1",
"valueFontSize": "16",
"plottooltext": "Current Temperature: $value°C",
"dataStreamURL": "../../../resources/php/gauge-and-widgets-guide-bulb-gauge-real-time-gauges-php-1.php",
"refreshInterval": "5",
"theme": "fint"
},
"colorrange": {
"color": [
{
"minvalue": "-60",
"maxvalue": "-35",
"label": "Mission control,{br}we have a situation!",
"code": "#ff0000"
},
{
"minvalue": "-35",
"maxvalue": "-25",
"label": "Something is just not right!",
"code": "#ff9900"
},
{
"minvalue": "-25",
"maxvalue": "-5",
"label": "All well ahoy!",
"code": "#00ff00"
}
]
},
"value": "-5",
"annotations": {
"showbelow": "0",
"groups": [
{
"id": "valtext",
"items": [
{
"id": "valuetxt",
"type": "text",
"text": "-5°C",
"alpha": "100",
"font": "Helvetica Neue,Arial",
"bold": "0",
"fontSize": "14",
"fontColor": "#00FF00",
"x": "$chartEndX - 50",
"y": "$chartStartY +60"
}
]
}
]
}
}<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: 'bulb',
renderAt: 'chart-container',
id: 'myChart',
width: '300',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Temperature status of deep freezers",
"upperlimit": "-5",
"lowerlimit": "-60",
"captionPadding": "30",
"showshadow": "0",
"showvalue": "1",
"useColorNameAsValue": "1",
"placeValuesInside": "1",
"valueFontSize": "16",
//Tooltext
"plottooltext": "Current Temperature: $value°C",
"dataStreamURL": "../../../resources/php/gauge-and-widgets-guide-bulb-gauge-real-time-gauges-php-1.php",
"refreshInterval": "5",
//Theme
"theme": "fint"
},
"colorrange": {
"color": [{
"minvalue": "-60",
"maxvalue": "-35",
"label": "Mission control,{br}we have a situation!",
"code": "#ff0000"
}, {
"minvalue": "-35",
"maxvalue": "-25",
"label": "Something is just not right!",
"code": "#ff9900"
}, {
"minvalue": "-25",
"maxvalue": "-5",
"label": "All well ahoy!",
"code": "#00ff00"
}]
},
"value": "-5",
//All annotations are grouped under this element
"annotations": {
"showbelow": "0",
"groups": [{
//Each group needs a unique ID
"id": "valtext",
"items": [{
"id": "valuetxt",
"type": "text",
"text": "-5°C",
"alpha": "100",
"font": "Helvetica Neue,Arial",
"bold": "0",
"fontSize": "14",
"fontColor": "#00FF00",
"x": "$chartEndX - 50",
"y": "$chartStartY +60"
}]
}]
}
},
"events": {
"renderComplete": function(evtObj, argObj) {
var annotations = evtObj.sender.annotations,
val = evtObj.sender.getData(),
color = val && (val > -25) ? "#00fc00" : ((val <= -25 && val > -35) ? "#ff9900" : "#ff0000");
annotations.update('valuetxt', {
"text": "Temperature{br}" + val + "°C",
"fontColor": color
});
},
"realtimeUpdateComplete": function(evtObj, argObj) {
var annotations = evtObj.sender.annotations,
val = evtObj.sender.getData(),
color = val && (val > -25) ? "#00ff00" : ((val <= -25 && val > -35) ? "#ff9900" : "#ff0000");
annotations.update('valuetxt', {
"text": "Temperature{br}" + val + "°C",
"fontColor": color
});
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes needed to configure real-time updates from the server:
| Attribute Name | Description | ||
|---|---|---|---|
|
This parameter sets the path of the page which is supposed to relay real-time data to the chart. If you have special characters as a part of the data stream URL, like ? or &, you will have to URL Encode the entire |
||
|
For this parameter, we can specify the number of seconds after which the chart will look for new data. This process will happen continuously - i.e., if we specify 5 seconds here, the chart will look for new data after every 5 seconds. |
||
|
|
Stopping/Restarting Updates
A bulb gauge configured to stop receiving real-time updates looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Temperature status of deep freezers",
"upperlimit": "-5",
"lowerlimit": "-60",
"captionPadding": "30",
"showshadow": "0",
"showvalue": "1",
"useColorNameAsValue": "1",
"placeValuesInside": "1",
"valueFontSize": "16",
"plottooltext": "Current Temperature: $value°C",
"dataStreamURL": "../../../resources/php/gauge-and-widgets-guide-bulb-gauge-real-time-gauges-php-1.php",
"refreshInterval": "5",
"theme": "fint"
},
"colorrange": {
"color": [
{
"minvalue": "-60",
"maxvalue": "-35",
"label": "Mission control,{br}we have a situation!",
"code": "#ff0000"
},
{
"minvalue": "-35",
"maxvalue": "-25",
"label": "Something is just not right!",
"code": "#ff9900"
},
{
"minvalue": "-25",
"maxvalue": "-5",
"label": "All well ahoy!",
"code": "#00ff00"
}
]
},
"value": "-5"
}<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: 'bulb',
renderAt: 'chart-container',
id: 'myChart',
width: '300',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Temperature status of deep freezers",
"upperlimit": "-5",
"lowerlimit": "-60",
"captionPadding": "30",
"showshadow": "0",
"showvalue": "1",
"useColorNameAsValue": "1",
"placeValuesInside": "1",
"valueFontSize": "16",
//Tooltext
"plottooltext": "Current Temperature: $value°C",
"dataStreamURL": "../../../resources/php/gauge-and-widgets-guide-bulb-gauge-real-time-gauges-php-1.php",
"refreshInterval": "5",
//Theme
"theme": "fint"
},
"colorrange": {
"color": [{
"minvalue": "-60",
"maxvalue": "-35",
"label": "Mission control,{br}we have a situation!",
"code": "#ff0000"
}, {
"minvalue": "-35",
"maxvalue": "-25",
"label": "Something is just not right!",
"code": "#ff9900"
}, {
"minvalue": "-25",
"maxvalue": "-5",
"label": "All well ahoy!",
"code": "#00ff00"
}]
},
"value": "-5"
},
"events": {
'beforeRender': function(evt, args) {
var chargePercent = 50,
startStopBtn = document.getElementById('btnSU');
if (!startStopBtn) {
// Create button if it does not already exist
startStopBtn = document.createElement('input');
startStopBtn.setAttribute('id', 'btnSU');
startStopBtn.setAttribute('type', 'button');
startStopBtn.setAttribute('value', 'Stop Update');
// Append button right after chart-container
args.container.parentNode.insertBefore(startStopBtn, args.container.nextSibling);
}
startStopBtn.onclick = function() {
var btnState = document.getElementById('btnSU').value;
if (btnState === 'Stop Update') {
startStopBtn.setAttribute('value', 'Restart Update');
evt.sender.stopUpdate();
} else {
startStopBtn.setAttribute('value', 'Stop Update');
evt.sender.restartUpdate();
}
};
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the JavaScript API used to stop and restart receiving real-time updates:
| Function Name | Parameter | Description |
|---|---|---|
|
None |
This method stops the chart from self-updating. |
|
None |
If you’ve stopped the real-time update of the chart, you can resume the update using this method. |
Configuring Real-time Events
FusionCharts Suite XT introduces two events, realTimeUpdateComplete and realTimeUpdateError, to track real-time updates on gauges.
A real-time bulb gauge configured to listen to the realTimeUpdateComplete event looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Temperature status of deep freezers",
"upperlimit": "-5",
"lowerlimit": "-60",
"captionPadding": "30",
"showshadow": "0",
"showvalue": "1",
"useColorNameAsValue": "1",
"placeValuesInside": "1",
"valueFontSize": "16",
"chartBottomMargin": "45",
"plottooltext": "Current Temperature: $value°C ",
"theme": "fint"
},
"colorrange": {
"color": [
{
"minvalue": "-60",
"maxvalue": "-35",
"label": "Mission control,{br}we have a situation!",
"code": "#ff0000"
},
{
"minvalue": "-35",
"maxvalue": "-25",
"label": "Something is just{br}not right!",
"code": "#ff9900"
},
{
"minvalue": "-25",
"maxvalue": "-5",
"label": "All well ahoy!",
"code": "#00ff00"
}
]
},
"value": "-5",
"annotations": {
"showbelow": "0",
"groups": [
{
"id": "valtext",
"items": [
{
"id": "background",
"type": "rectangle",
"alpha": "50",
"fillColor": "#AABBCC",
"x": "$chartCenterX-30",
"tox": "$chartCenterX+30",
"y": "$chartEndY-35",
"toy": "$chartEndY-5"
},
{
"id": "valuetxt",
"type": "text",
"text": "-5°C",
"alpha": "100",
"font": "Helvetica Neue,Arial",
"bold": "0",
"fontSize": "14",
"fontColor": "#00FF00",
"x": "$chartCenterX",
"y": "$chartEndY-20"
}
]
}
]
}
}<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: 'bulb',
renderAt: 'chart-container',
id: 'myChart',
width: '300',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Temperature status of deep freezers",
"upperlimit": "-5",
"lowerlimit": "-60",
"captionPadding": "30",
"showshadow": "0",
"showvalue": "1",
"useColorNameAsValue": "1",
"placeValuesInside": "1",
"valueFontSize": "16",
"chartBottomMargin": "45",
//Tooltext
"plottooltext": "Current Temperature: $value°C ",
//Theme
"theme": "fint"
},
"colorrange": {
"color": [{
"minvalue": "-60",
"maxvalue": "-35",
"label": "Mission control,{br}we have a situation!",
"code": "#ff0000"
}, {
"minvalue": "-35",
"maxvalue": "-25",
"label": "Something is just{br}not right!",
"code": "#ff9900"
}, {
"minvalue": "-25",
"maxvalue": "-5",
"label": "All well ahoy!",
"code": "#00ff00"
}]
},
"value": "-5",
//All annotations are grouped under this element
"annotations": {
"showbelow": "0",
"groups": [{
//Each group needs a unique ID
"id": "valtext",
"items": [{
"id": "background",
//Rectangle item
"type": "rectangle",
"alpha": "50",
"fillColor": "#AABBCC",
"x": "$chartCenterX-30",
"tox": "$chartCenterX+30",
"y": "$chartEndY-35",
"toy": "$chartEndY-5"
}, {
"id": "valuetxt",
"type": "text",
"text": "-5°C",
"alpha": "100",
"font": "Helvetica Neue,Arial",
"bold": "0",
"fontSize": "14",
"fontColor": "#00FF00",
"x": "$chartCenterX",
"y": "$chartEndY-20",
}]
}]
}
},
"events": {
"rendered": function(evt, args) {
updateAnnotation = function(evtObj, argObj) {
var code,
textColor,
chartObj = evtObj.sender,
val = chartObj.getData(),
annotations = chartObj.annotations;
if (val >= -24) {
code = "#00FF00";
textColor = "#000000";
} else if (val < -24 && val > -35) {
code = "#ff9900";
textColor = "#0000ff";
} else {
code = "#ff0000";
textColor = "#FFFFFF";
}
annotations.update("background", {
"fillColor": code
});
annotations.update('valuetxt', {
"text": val + "°C",
"fontColor": textColor
});
};
evt.sender.chartInterval = setInterval(function() {
var num = (Math.floor(Math.random() * 55) * -1) - 5;
evt.sender.feedData("&value=" + num);
}, 10000);
},
"renderComplete": function(evt, args) {
updateAnnotation(evt, args);
},
"realtimeUpdateComplete": function(evt, args) {
updateAnnotation(evt, args);
},
"disposed": function(evt, args) {
clearInterval(evt.sender.chartInterval);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the realTimeUpdateComplete event:
| Event Name | Description |
|---|---|
|
This event is raised every time the real-time gauge updates itself with new data. This event is raised in any of the following cases: |
A bulb gauge configured to listen to the realTimeUpdateError event looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Temperature status of deep freezers",
"upperlimit": "-5",
"lowerlimit": "-60",
"captionPadding": "30",
"showshadow": "0",
"showvalue": "1",
"useColorNameAsValue": "1",
"placeValuesInside": "1",
"valueFontSize": "16",
"plottooltext": "Current Temperature: $value°C",
"dataStreamURL": "bulbData.php",
"refreshInterval": "5",
"theme": "fint"
},
"colorrange": {
"color": [
{
"minvalue": "-60",
"maxvalue": "-35",
"label": "Mission control,{br}we have a situation!",
"code": "#ff0000"
},
{
"minvalue": "-35",
"maxvalue": "-25",
"label": "Something is just not right!",
"code": "#ff9900"
},
{
"minvalue": "-25",
"maxvalue": "-5",
"label": "All well ahoy!",
"code": "#00ff00"
}
]
},
"value": "-5"
}<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: 'bulb',
renderAt: 'chart-container',
id: 'myChart',
width: '300',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Temperature status of deep freezers",
"upperlimit": "-5",
"lowerlimit": "-60",
"captionPadding": "30",
"showshadow": "0",
"showvalue": "1",
"useColorNameAsValue": "1",
"placeValuesInside": "1",
"valueFontSize": "16",
//Tooltext
"plottooltext": "Current Temperature: $value°C",
"dataStreamURL": "bulbData.php",
"refreshInterval": "5",
//Theme
"theme": "fint"
},
"colorrange": {
"color": [{
"minvalue": "-60",
"maxvalue": "-35",
"label": "Mission control,{br}we have a situation!",
"code": "#ff0000"
}, {
"minvalue": "-35",
"maxvalue": "-25",
"label": "Something is just not right!",
"code": "#ff9900"
}, {
"minvalue": "-25",
"maxvalue": "-5",
"label": "All well ahoy!",
"code": "#00ff00"
}]
},
"value": "-5"
},
events: {
'beforeRender': function(evt, args) {
// Create container div for data table
var msgCont = document.createElement('div');
msgCont.setAttribute('id', 'chart-message');
//Set style for message container
msgCont.style.cssText = 'width : 300px; min-height: 50px; color : #cc0000; font-family : Arial, Helvetica, sans-serif; font-size : 14px; margin-top : 10px;';
// Append container div to page
args.container.parentNode.insertBefore(msgCont, args.container.nextSibling);
},
'realtimeUpdateError': function(evt, args) {
document.getElementById('chart-message').innerHTML = "<b>Error Occured !</b><br>Status Code : " + args.httpStatus;
evt.sender.stopUpdate();
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the realTimeUpdateError event:
| Event Name | Description |
|---|---|
|
This event is raised when an error occurs while performing real-time update using |
Troubleshooting Real-time Gauges
While accessing any of the JavaScript methods listed above, if you get an error like "... is not a function of ...", make sure that you are NOT running the chart from the local file system (C:\ , D:\). Instead, run the chart from behind a server (localhost - IIS, Apache etc.). This is because the default security settings do not allow the chart to perform JavaScript interactions on the local file system.