Real-time Linear Gauge
The linear 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 linear 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 real-time data format for linear gauge depends on:
-
Whether you’ve multiple pointers on the chart or a single pointer?
-
If you’ve multiple pointers, whether you want to provide data by pointer numerical index or by their defined IDs?
-
Whether you’re using Message Logger for the chart?
-
Commands for the chart - like stop update
Simple Example
Updating a Single Pointer
In the simplest form, if you’re looking to update the value of a gauge, you need to output the data in following format:
Here, the output is a single value, 75. So, when the gauge will read this value, it will update the chart by setting its value to 75 (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 linear gauge configured to update the value of a single pointer looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High"
}
]
},
"pointers": {
"pointer": [
{
"value": "75"
}
]
}
}<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: 'hlineargauge',
renderAt: 'chart-container',
id: 'cpu-linear-gauge-1',
width: '400',
height: '170',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "35",
"label": "Low",
}, {
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
}, {
"minValue": "70",
"maxValue": "100",
"label": "High",
}]
},
"pointers": {
"pointer": [{
"value": "75"
}]
}
},
"events": {
"rendered": function(evtObj, argObj) {
evtObj.sender.intervalVar = setInterval(function() {
var prcnt = 65 + parseInt(Math.floor(Math.random() * 10), 10);
FusionCharts.items["cpu-linear-gauge-1"].feedData("value=" + prcnt);
}, 5000);
},
"disposed": function(evtObj, argObj) {
clearInterval(evtObj.sender.intervalVar);
}
}
}
);
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 configure real-time updates:
| 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. |
Updating Multiple Pointers
If you have multiple pointers defined, you can update them all in a single update as shown in the following output from the real-time data provider page:
Here, we are specifying two values in the real-time update. So, assuming that we have two pointers defined for the gauge , each one of them will take the values in sequence and update itself. Therefore, the first pointer will now show 34 and second one will show 25. The sequence of the pointers is determined by the order in which they are defined in the JSON/XML data.
A linear gauge configured to update multiple pointers looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"subcaption": "Transaction Server vs Web Server",
"subcaptionFontBold": "0",
"subCaptionFontSize": "12",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"valueAbovePointer": "1",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#6baa01"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#e44a00"
}
]
},
"pointers": {
"pointer": [
{
"value": "75",
"bgColor": "#999999",
"bgAlpha": "80",
"tooltext": "Transaction Server: $value%"
},
{
"value": "92",
"bgColor": "#444444",
"bgAlpha": "80",
"tooltext": "Web Server: $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: 'hlineargauge',
renderAt: 'chart-container',
id: 'cpu-linear-gauge-2',
width: '400',
height: '170',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"subcaption": "Transaction Server vs Web Server",
"subcaptionFontBold": "0",
"subCaptionFontSize": "12",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"valueAbovePointer": "1",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#6baa01"
}, {
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
}, {
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#e44a00"
}]
},
"pointers": {
//Multiple pointers defined here
"pointer": [{
"value": "75",
"bgColor": "#999999",
"bgAlpha": "80",
"tooltext": "Transaction Server: $value%"
}, {
"value": "92",
"bgColor": "#444444",
"bgAlpha": "80",
"tooltext": "Web Server: $value%"
}]
}
},
"events": {
"rendered": function(evtObj, argObj) {
evtObj.sender.intervalVar = setInterval(function() {
//Updating widget with randomly generated values
//Range 60-70%
var ggPrcnt = 60 + parseInt(Math.floor(Math.random() * 10), 10),
//Range 75-85%
bcPrcnt = 75 + parseInt(Math.floor(Math.random() * 10), 10);
FusionCharts.items["cpu-linear-gauge-2"].feedData("value=" + ggPrcnt + "|" + bcPrcnt);
}, 5000);
},
"disposed": function(evtObj, argObj) {
clearInterval(evtObj.sender.intervalVar);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Updating Pointer(s) using the Named ID
Another way to update pointers is by defining a unique ID for each pointer and then passing the updated data value to the ID.
To define unique IDs for pointers, you can use the code snippet shown below:
"pointers": {
"pointer": [
{
...
"id": "gGrovePointer",
...
},
{
...
"id": "bFieldPointer",
...
}
]
}You can now update each of these named pointers as shown in the following output in your real-time data stream:
This will change the value of pointer 1 (having the id gGrovePointer) to 65 and pointer 2 (having the id bFieldPointer) to 80.
A linear gauge configured to update the values of multiple pointers using named IDs looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"subcaption": "Transaction Server vs Web Server",
"subcaptionFontBold": "0",
"subCaptionFontSize": "12",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"valueAbovePointer": "0",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#6baa01"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#e44a00"
}
]
},
"pointers": {
"pointer": [
{
"id": "transServer",
"value": "75",
"bgColor": "#999999",
"bgAlpha": "80",
"tooltext": "Transaction Server: $value%"
},
{
"id": "webServer",
"value": "92",
"bgColor": "#444444",
"bgAlpha": "80",
"tooltext": "Web Server: $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: 'hlineargauge',
renderAt: 'chart-container',
id: 'cpu-linear-gauge-3',
width: '400',
height: '170',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"subcaption": "Transaction Server vs Web Server",
"subcaptionFontBold": "0",
"subCaptionFontSize": "12",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"valueAbovePointer": "0",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#6baa01"
}, {
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
}, {
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#e44a00"
}]
},
"pointers": {
//Multiple pointers defined here
"pointer": [{
"id": "transServer",
"value": "75",
"bgColor": "#999999",
"bgAlpha": "80",
"tooltext": "Transaction Server: $value%"
}, {
"id": "webServer",
"value": "92",
"bgColor": "#444444",
"bgAlpha": "80",
"tooltext": "Web Server: $value%"
}]
}
},
"events": {
"rendered": function(evtObj, argObj) {
evtObj.sender.intervalVar = setInterval(function() {
//Updating widget with randomly generated values
//Transaction server Range 60-70%
var trnPrcnt = 60 + parseInt(Math.floor(Math.random() * 10), 10),
//Web server Range 75-85%
webPrcnt = 75 + parseInt(Math.floor(Math.random() * 10), 10);
FusionCharts.items["cpu-linear-gauge-3"].setDataForId("transServer", trnPrcnt);
FusionCharts.items["cpu-linear-gauge-3"].setDataForId("webServer", webPrcnt);
}, 5000);
},
"disposed": function(evtObj, argObj) {
clearInterval(evtObj.sender.intervalVar);
}
}
}
);
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 pointers using their IDs:
| 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. |
|
pointerIndex |
This method returns the data for the given pointer index on the chart. The first pointer is represented by index 1, second by 2, and so on. |
|
pointerId |
This method returns the data for the given pointer using its defined ID. |
|
pointerIndex, value |
This method sets the data for the given pointer index on the chart. The first pointer is represented by index 1, second by 2 and so on. |
|
pointerId, value |
This method returns the data for the given pointer using its defined ID. |
You can call the JavaScript APIs of a chart only after it has rendered.
Retrieving Data from the Gauge
We can retrieve data from gauge once the data has been updated.
A linear gauge configured to retrieve updated data looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High"
}
]
},
"pointers": {
"pointer": [
{
"value": "75"
}
]
}
}<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: 'hlineargauge',
renderAt: 'chart-container',
id: 'cpu-linear-gauge-4',
width: '400',
height: '170',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "35",
"label": "Low",
}, {
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
}, {
"minValue": "70",
"maxValue": "100",
"label": "High",
}]
},
"pointers": {
"pointer": [{
"value": "75"
}]
}
},
"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="Get Data" id="getdata_btn" style="margin-left:5px;margin-top:5px;"/><div id="tableView" style="margin: 3px;padding:5px;float: left;"></div>';
// set css style for controllers div
controllers.style.cssText = '';
args.container.appendChild(controllers);
controllers.setAttribute('id', 'controllers');
},
"renderComplete": function(evtObj, argObj) {
evtObj.sender.intervalVar = setInterval(function() {
var prcnt = 65 + parseInt(Math.floor(Math.random() * 10), 10);
FusionCharts.items["cpu-linear-gauge-4"].feedData("value=" + prcnt);
}, 5000);
//Format minutes, seconds by adding 0 prefix accordingly
function formatTime(time) {
(time < 10) ? (time = "0" + time) : (time = time);
return time;
}
function showData() {
//Retrieving the data
var dataVal = FusionCharts.items["cpu-linear-gauge-4"].getData(1),
str = "",
currDate = new Date(),
label = formatTime(currDate.getHours()) + ":" + formatTime(currDate.getMinutes()) + ":" + formatTime(currDate.getSeconds());
//Creating the table format
str += '<table border="1" cellpadding="1" cellspacing="0" bordercolor="#cccccc" width="320px">';
str += ' <tr>';
str += ' <td width="50%" style="font-weight: bold;font-size: 14px;padding: 3px;">Current Time</td>';
str += ' <td width="50%" style="font-weight: bold;font-size: 14px;padding: 3px;">Current Utilization</td>';
str += ' </tr>';
str += ' <tr>';
str += ' <td width="50%" style="padding: 3px;" align="center">' + label + '</td>';
str += ' <td width="50%" style="padding: 3px;" align="center">' + dataVal + '</td>';
str += ' </tr>';
//Preparing html string to create the table with data
str += '</table>';
//Showing the table
document.getElementById("tableView").style.cssText = 'overflow-y:auto;display:block;margin-top:5px';
document.getElementById("tableView").innerHTML = str;
}
document.getElementById("getdata_btn").addEventListener("click", showData);
},
"disposed": function(evtObj, argObj) {
clearInterval(evtObj.sender.intervalVar);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>The data structure needed to retrieve updated data is as follows:
Real-time Updates using Server-side Script
An LED gauge updated in real-time using a server-side script looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"subcaption": "food.hsm.com",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "40",
"valueFontSize": "11",
"valueFontBold": "0",
"dataStreamUrl": "../../../resources/php/gauge-and-widgets-guide-linear-gauge-real-time-gauges-php-1.php",
"refreshInterval": "10"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#6baa01"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#e44a00"
}
]
},
"pointers": {
"pointer": [
{
"value": "75"
}
]
}
}<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: 'hlineargauge',
renderAt: 'chart-container',
id: 'cs-linear-gauge-5',
width: '400',
height: '170',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"subcaption": "food.hsm.com",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "40",
"valueFontSize": "11",
"valueFontBold": "0",
"dataStreamUrl": "../../../resources/php/gauge-and-widgets-guide-linear-gauge-real-time-gauges-php-1.php",
"refreshInterval": "10"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#6baa01"
}, {
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
}, {
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#e44a00"
}]
},
"pointers": {
"pointer": [{
"value": "75"
}]
}
}
}
);
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:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"subcaption": "food.hsm.com",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "40",
"valueFontSize": "11",
"valueFontBold": "0",
"dataStreamUrl": "../../../resources/php/gauge-and-widgets-guide-linear-gauge-real-time-gauges-php-2.php",
"refreshInterval": "10"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#6baa01"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#e44a00"
}
]
},
"pointers": {
"pointer": [
{
"value": "75"
}
]
}
}<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: 'hlineargauge',
renderAt: 'chart-container',
id: 'cs-linear-gauge-6',
width: '400',
height: '170',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"subcaption": "food.hsm.com",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "40",
"valueFontSize": "11",
"valueFontBold": "0",
"dataStreamUrl": "../../../resources/php/gauge-and-widgets-guide-linear-gauge-real-time-gauges-php-2.php",
"refreshInterval": "10"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#6baa01"
}, {
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
}, {
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#e44a00"
}]
},
"pointers": {
"pointer": [{
"value": "75"
}]
}
},
"events": {
'beforeRender': function(evtObj, argObj) {
// creating div for controllers
var controllers = document.createElement('div');
// Create radio buttons inside div
controllers.innerHTML = '<input type="button" value="Stop Update" id="toggleBtn" style="margin-left:5px;margin-top:5px;font-size:13px;padding:2px;" />';
argObj.container.appendChild(controllers);
controllers.setAttribute('id', 'controllers');
},
'renderComplete': function(evtObj, argObj) {
var isStopped = false,
startStopUpdate = function() {
if (!isStopped) {
isStopped = true;
document.getElementById("toggleBtn").value = "Restart Update";
FusionCharts.items["cs-linear-gauge-6"].stopUpdate();
} else {
isStopped = false;
document.getElementById("toggleBtn").value = "Stop Update";
FusionCharts.items["cs-linear-gauge-6"].restartUpdate();
}
}
document.getElementById("toggleBtn").addEventListener("click", startStopUpdate);
}
}
}
);
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 is used to stop the gauge from self-updating. |
|
|
If you have stopped the gauge from updating itself in real-time, this method is used to restart the updates. |
Configuring Real-time Events
FusionCharts Suite XT introduces two events, realTimeUpdateComplete and realTimeUpdateError, to track real-time updates on gauges.
A real-time linear gauge configured to listen to the realTimeUpdateComplete event looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "40",
"valueFontSize": "11",
"valueFontBold": "0",
"showValue": "0",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High"
}
]
},
"pointers": {
"pointer": [
{
"value": "75"
}
]
},
"annotations": {
"origw": "400",
"origh": "190",
"autoscale": "1",
"groups": [
{
"id": "range",
"items": [
{
"id": "rangeBg",
"type": "rectangle",
"x": "$chartCenterX-70",
"y": "$chartEndY-35",
"tox": "$chartCenterX +70",
"toy": "$chartEndY-15",
"fillcolor": "#ff6650"
},
{
"id": "rangeText",
"type": "Text",
"fontSize": "11",
"fillcolor": "#000000",
"text": "Currently Utilizing 75%",
"x": "$chartCenterX",
"y": "$chartEndY-25"
}
]
}
]
}
}<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: 'hlineargauge',
renderAt: 'chart-container',
id: 'cpu-linear-gauge-7',
width: '400',
height: '170',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "40",
"valueFontSize": "11",
"valueFontBold": "0",
"showValue": "0",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "35",
"label": "Low",
}, {
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
}, {
"minValue": "70",
"maxValue": "100",
"label": "High",
}]
},
"pointers": {
"pointer": [{
"value": "75"
}]
},
"annotations": {
"origw": "400",
"origh": "190",
"autoscale": "1",
"groups": [{
"id": "range",
"items": [{
"id": "rangeBg",
"type": "rectangle",
"x": "$chartCenterX-70",
"y": "$chartEndY-35",
"tox": "$chartCenterX +70",
"toy": "$chartEndY-15",
"fillcolor": "#ff6650"
}, {
"id": "rangeText",
"type": "Text",
"fontSize": "11",
"fillcolor": "#000000",
"text": "Currently Utilizing 75%",
"x": "$chartCenterX",
"y": "$chartEndY-25"
}]
}]
}
},
"events": {
"rendered": function(evtObj, argObj) {
evtObj.sender.intervalVar = setInterval(function() {
var prcnt = 65 + parseInt(Math.floor(Math.random() * 10), 10);
FusionCharts.items["cpu-linear-gauge-7"].feedData("value=" + prcnt);
}, 5000);
},
"realTimeUpdateComplete": function(evt, arg) {
var annotations = evt.sender.annotations,
percentValue = evt.sender.getData(1),
colorVal = "#" + ((percentValue > 70) ? "ff6650" : "f6bd11");
annotations && annotations.update('rangeText', {
"text": "Currently Utilizing " + percentValue + "%"
});
annotations && annotations.update('rangeBg', {
"fillcolor": colorVal
});
},
"disposed": function(evtObj, argObj) {
clearInterval(evtObj.sender.intervalVar);
}
}
}
);
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: |
|
This event is raised when an error occurs while performing real-time update using |
Troubleshooting
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 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 JavaScript interactions on local file system, unless otherwise specifically set.