Real-time LED Gauge
The LED 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 every n seconds, and silently updates itself to reflect the current state of data. There are two different ways to update the angular 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 LED 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.
A real-time LED gauge looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Battery Charge Remaining",
"lowerLimit": "0",
"upperLimit": "100",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": "%",
"valueFontSize": "12",
"origW": "300",
"origH": "200",
"ledGap": "0",
"showhovereffect": "1",
"useSameFillColor": "1",
"useSameFillBgColor": "1",
"chartBottomMargin": "20",
"dataStreamURL": "../../../resources/php/gauge-and-widgets-guide-led-gauge-real-time-gauges-php-1.php",
"refreshInterval": "5",
"theme": "fint"
},
"annotations": {
"showbelow": "1",
"groups": [
{
"id": "indicator",
"items": [
{
"id": "bgRectAngle",
"type": "rectangle",
"radius": "5",
"fillColor": "#333333",
"x": "$gaugeEndX - 10",
"tox": "$gaugeEndX + 12",
"y": "$gaugeCenterY-20",
"toy": "$gaugeCenterY + 20"
}
]
}
]
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "45",
"code": "#e44a00"
},
{
"minValue": "45",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"value": "50"
}<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: 'hled',
renderAt: 'chart-container',
id: 'myHLED',
width: '300',
height: '200',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Battery Charge Remaining",
"lowerLimit": "0",
"upperLimit": "100",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": "%",
"valueFontSize": "12",
"origW": "300",
"origH": "200",
"ledGap": "0",
"showhovereffect": "1",
//Single Fill color
"useSameFillColor": "1",
"useSameFillBgColor": "1",
"chartBottomMargin": "20",
"dataStreamURL": "../../../resources/php/gauge-and-widgets-guide-led-gauge-real-time-gauges-php-1.php",
"refreshInterval": "5",
"theme": "fint"
},
//All annotations are grouped under this element
"annotations": {
"showbelow": "1",
"groups": [{
//Each group needs a unique ID
"id": "indicator",
"items": [
{
"id": "bgRectAngle",
//Polygon item
"type": "rectangle",
"radius": "5",
"fillColor": "#333333",
"x": "$gaugeEndX - 10",
"tox": "$gaugeEndX + 12",
"y": "$gaugeCenterY-20",
"toy": "$gaugeCenterY + 20"
}
]
}]
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "45",
"code": "#e44a00"
}, {
"minValue": "45",
"maxValue": "75",
"code": "#f8bd19"
}, {
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}]
},
"value": "50"
}
}
);
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 methods used to update a pointer:
| Function Name | Parameter | Description |
|---|---|---|
|
strData |
This method feeds 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 returns the data currently being shown by the gauge. |
|
value |
This method sets the data for the gauge. The value should be within the limits of the gauge. |
Configuring Real-time Updates Using Server-side Script
An LED gauge updated in real-time using a server-side script looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Battery Charge Remaining",
"lowerLimit": "0",
"upperLimit": "100",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": "%",
"valueFontSize": "12",
"origW": "300",
"origH": "200",
"ledGap": "0",
"showhovereffect": "1",
"useSameFillColor": "1",
"useSameFillBgColor": "1",
"chartBottomMargin": "20",
"dataStreamURL": "../../../resources/php/gauge-and-widgets-guide-led-gauge-real-time-gauges-php-1.php",
"refreshInterval": "5",
"theme": "fint"
},
"annotations": {
"showbelow": "1",
"groups": [
{
"id": "indicator",
"items": [
{
"id": "bgRectAngle",
"type": "rectangle",
"radius": "5",
"fillColor": "#333333",
"x": "$gaugeEndX - 10",
"tox": "$gaugeEndX + 12",
"y": "$gaugeCenterY-20",
"toy": "$gaugeCenterY + 20"
}
]
}
]
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "45",
"code": "#e44a00"
},
{
"minValue": "45",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"value": "50"
}<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: 'hled',
renderAt: 'chart-container',
id: 'myHLED',
width: '300',
height: '200',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Battery Charge Remaining",
"lowerLimit": "0",
"upperLimit": "100",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": "%",
"valueFontSize": "12",
"origW": "300",
"origH": "200",
"ledGap": "0",
"showhovereffect": "1",
//Single Fill color
"useSameFillColor": "1",
"useSameFillBgColor": "1",
"chartBottomMargin": "20",
"dataStreamURL": "../../../resources/php/gauge-and-widgets-guide-led-gauge-real-time-gauges-php-1.php",
"refreshInterval": "5",
"theme": "fint"
},
//All annotations are grouped under this element
"annotations": {
"showbelow": "1",
"groups": [{
//Each group needs a unique ID
"id": "indicator",
"items": [
{
"id": "bgRectAngle",
//Polygon item
"type": "rectangle",
"radius": "5",
"fillColor": "#333333",
"x": "$gaugeEndX - 10",
"tox": "$gaugeEndX + 12",
"y": "$gaugeCenterY-20",
"toy": "$gaugeCenterY + 20"
}
]
}]
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "45",
"code": "#e44a00"
}, {
"minValue": "45",
"maxValue": "75",
"code": "#f8bd19"
}, {
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}]
},
"value": "50"
}
}
);
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 used to configure real-time updates using server-side scripts:
| 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
An LED gauge configured to stop and restart receiving real-time updates looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Battery Charge Remaining",
"lowerLimit": "0",
"upperLimit": "100",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": "%",
"valueFontSize": "12",
"origW": "300",
"origH": "200",
"ledGap": "0",
"showhovereffect": "1",
"useSameFillColor": "1",
"useSameFillBgColor": "1",
"chartBottomMargin": "20",
"dataStreamURL": "../../../resources/php/gauge-and-widgets-guide-led-gauge-real-time-gauges-php-2.php",
"refreshInterval": "5",
"theme": "fint"
},
"annotations": {
"showbelow": "1",
"groups": [
{
"id": "indicator",
"items": [
{
"id": "bgRectAngle",
"type": "rectangle",
"radius": "5",
"fillColor": "#333333",
"x": "$gaugeEndX - 10",
"tox": "$gaugeEndX + 12",
"y": "$gaugeCenterY-20",
"toy": "$gaugeCenterY + 20"
}
]
}
]
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "45",
"code": "#e44a00"
},
{
"minValue": "45",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"value": "50"
}<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: 'hled',
renderAt: 'chart-container',
id: 'myHLED',
width: '300',
height: '200',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Battery Charge Remaining",
"lowerLimit": "0",
"upperLimit": "100",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": "%",
"valueFontSize": "12",
"origW": "300",
"origH": "200",
"ledGap": "0",
"showhovereffect": "1",
//Single Fill color
"useSameFillColor": "1",
"useSameFillBgColor": "1",
"chartBottomMargin": "20",
"dataStreamURL": "../../../resources/php/gauge-and-widgets-guide-led-gauge-real-time-gauges-php-2.php",
"refreshInterval": "5",
"theme": "fint"
},
//All annotations are grouped under this element
"annotations": {
"showbelow": "1",
"groups": [{
//Each group needs a unique ID
"id": "indicator",
"items": [
{
"id": "bgRectAngle",
//Polygon item
"type": "rectangle",
"radius": "5",
"fillColor": "#333333",
"x": "$gaugeEndX - 10",
"tox": "$gaugeEndX + 12",
"y": "$gaugeCenterY-20",
"toy": "$gaugeCenterY + 20"
}
]
}]
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "45",
"code": "#e44a00"
}, {
"minValue": "45",
"maxValue": "75",
"code": "#f8bd19"
}, {
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}]
},
"value": "50"
},
"events": {
'beforeRender': function(evt, args) {
var chargePercent = 50,
flag = 0,
count = 0,
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 |
|---|---|---|
|
|
This method stops the chart from self-updating. |
|
|
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 LED gauge configured to listen to the realTimeUpdateComplete event looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Battery Charge Remaining",
"lowerLimit": "0",
"upperLimit": "100",
"showTickMarks": "0",
"upperLimitDisplay": "Full",
"numberSuffix": "%",
"valueFontSize": "12",
"origW": "300",
"origH": "200",
"ledGap": "0",
"showhovereffect": "1",
"useSameFillColor": "1",
"chartBottomMargin": "20",
"theme": "fint"
},
"annotations": {
"groups": [
{
"id": "indicator",
"showbelow": "1",
"items": [
{
"id": "bgRectAngle",
"type": "rectangle",
"radius": "5",
"fillColor": "#333333",
"x": "$gaugeEndX - 10",
"tox": "$gaugeEndX + 12",
"y": "$gaugeCenterY-20",
"toy": "$gaugeCenterY + 20"
}
]
},
{
"id": "remainingTime",
"showbelow": "0",
"items": [
{
"id": "remainingTxt",
"type": "text",
"text": "",
"fontColor": "#FFFFFF",
"fontSize": "12",
"bold": "1",
"x": "$gaugeCenterX",
"y": "$gaugeCenterY"
}
]
}
]
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "30",
"code": "#e44a00"
},
{
"minValue": "30",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"value": "50"
}<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: 'hled',
renderAt: 'chart-container',
id: 'myHLED1',
width: '300',
height: '200',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Battery Charge Remaining",
"lowerLimit": "0",
"upperLimit": "100",
"showTickMarks": "0",
"upperLimitDisplay": "Full",
"numberSuffix": "%",
"valueFontSize": "12",
"origW": "300",
"origH": "200",
"ledGap": "0",
"showhovereffect": "1",
//Single Fill color
"useSameFillColor": "1",
"chartBottomMargin": "20",
"theme": "fint"
},
//All annotations are grouped under this element
"annotations": {
"groups": [{
//Each group needs a unique ID
"id": "indicator",
"showbelow": "1",
"items": [
{
"id": "bgRectAngle",
//Polygon item
"type": "rectangle",
"radius": "5",
"fillColor": "#333333",
"x": "$gaugeEndX - 10",
"tox": "$gaugeEndX + 12",
"y": "$gaugeCenterY-20",
"toy": "$gaugeCenterY + 20"
}
]
}, {
//Each group needs a unique ID
"id": "remainingTime",
"showbelow": "0",
"items": [
{
"id": "remainingTxt",
//Polygon item
"type": "text",
"text": "",
"fontColor": "#FFFFFF",
"fontSize": "12",
"bold": "1",
"x": "$gaugeCenterX",
"y": "$gaugeCenterY",
}
]
}]
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "30",
"code": "#e44a00"
}, {
"minValue": "30",
"maxValue": "75",
"code": "#f8bd19"
}, {
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}]
},
"value": "50"
},
events: {
'renderComplete': function(evt, arg) {
var chargePercent = 50,
flag = 0,
count = 0;
evt.sender.chargeInterval = setInterval(function() {
if (flag === 0) {
count++;
if (count > 4) {
chargePercent -= 5;
count = 0;
}
if (chargePercent === 5) {
flag = 1;
}
} else {
chargePercent += 5;
if (chargePercent === 100) {
flag = 0;
}
}
evt.sender.feedData("&value=" + chargePercent);
}, 2000);
},
'realTimeUpdateComplete': function(evt, arg) {
var annotations = evt.sender.annotations,
chargePercent = evt.sender.getData(),
minutes = 2.4 * chargePercent,
hr = parseInt(minutes / 60),
hr = (hr <= 0) ? "" : hr + ((hr === 1) ? " hour " : " hours "),
min = minutes % 60,
min = (min <= 0) ? "" : ((min < 9) ? "0" + min : min) + " minutes ";
annotations.update('remainingTxt', {
"text": hr + min + "remaining..."
});
},
'disposed': function(evt, arg) {
clearInterval(evt.sender.chargeInterval);
}
}
}
);
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 LED gauge configured to listen to the realTimeUpdateError event looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Battery Charge Remaining",
"lowerLimit": "0",
"upperLimit": "100",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": "%",
"valueFontSize": "12",
"origW": "300",
"origH": "200",
"ledGap": "0",
"showhovereffect": "1",
"useSameFillColor": "1",
"useSameFillBgColor": "1",
"chartBottomMargin": "20",
"dataStreamURL": "led-data.php",
"refreshInterval": "5",
"theme": "fint"
},
"annotations": {
"showbelow": "1",
"groups": [
{
"id": "indicator",
"items": [
{
"id": "bgRectAngle",
"type": "rectangle",
"radius": "5",
"fillColor": "#333333",
"x": "$gaugeEndX - 10",
"tox": "$gaugeEndX + 12",
"y": "$gaugeCenterY-20",
"toy": "$gaugeCenterY + 20"
}
]
}
]
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "45",
"code": "#e44a00"
},
{
"minValue": "45",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"value": "50"
}<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: 'hled',
renderAt: 'chart-container',
id: 'myHLED',
width: '300',
height: '200',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Battery Charge Remaining",
"lowerLimit": "0",
"upperLimit": "100",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": "%",
"valueFontSize": "12",
"origW": "300",
"origH": "200",
"ledGap": "0",
"showhovereffect": "1",
//Single Fill color
"useSameFillColor": "1",
"useSameFillBgColor": "1",
"chartBottomMargin": "20",
"dataStreamURL": "led-data.php",
"refreshInterval": "5",
"theme": "fint"
},
//All annotations are grouped under this element
"annotations": {
"showbelow": "1",
"groups": [{
//Each group needs a unique ID
"id": "indicator",
"items": [
{
"id": "bgRectAngle",
//Polygon item
"type": "rectangle",
"radius": "5",
"fillColor": "#333333",
"x": "$gaugeEndX - 10",
"tox": "$gaugeEndX + 12",
"y": "$gaugeCenterY-20",
"toy": "$gaugeCenterY + 20"
}
]
}]
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "45",
"code": "#e44a00"
}, {
"minValue": "45",
"maxValue": "75",
"code": "#f8bd19"
}, {
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}]
},
"value": "50"
},
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 interaction on the local file system, unless otherwise specifically set.