Loading
Real-time Gauges
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:
-
Configure real-time updates using JavaScript API
-
Configure real-time updates using server-side script
-
Stop/restart updates
-
Configure real-time events
-
Troubleshoot real-time gauges
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:
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. |
The data structure needed to render a real-time LED gauge is given below::
{
"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"
}Configuring Real-time Updates Using Server-side Script
An LED gauge updated in real-time using a server-side script looks like this:
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. |
|
Constantly changing data stamp that can be added to the real-time data URL, so as to maintain a state. For more information, read the Adding Data Stamp article. |
The data structure needed to configure real-time updates using server-side script is given below:
{
"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"
}Stopping/Restarting Updates
An LED gauge configured to stop and restart receiving real-time updates looks like this:
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. |
The data structure needed to stop and restart receiving real-time updates is given below:
{
"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"
}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:
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: |
The data structure needed to configure the realTimeUpdateComplete event for a real-time LED gauge is given below:
{
"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"
}A LED gauge configured to listen to the realTimeUpdateError event looks like this:
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 |
The data structure needed to configure a LED gauge for the realTimeUpdateError event is given below:
{
"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"
}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 calling the JavaScript method before the chart has loaded and rendered. You need to use the
FC_Renderedfunction or define the event listener for theRenderedevent of the chart to track the loading of the chart. -
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.
There! You have now seen how you can configure real-time updates and events for gauges and troubleshoot them.