Introduction to Real-time Gauges
FusionCharts Suite XT is shipped with different types of charts, gauges, and maps. Each of these categories of the product can be used to plot static as well as real-time data. This section covers how gauges can be used to plot real-time data.
To know more about the features or configurations, click here.
Real-time gauges are useful in sectors such as healthcare, IT, automotive, manufacturing, stock market, networking, essentially for all applications where continuous monitoring of a state is required. They let you -
-
Monitor a KPI set for a system/business
-
Analyze current/single value of interest
-
Set alerts to notify critical events
-
Compare performance based on different business goals
A real-time gauge polls for new data at regular preset intervals and displays the current data on the gauge without having to refresh the page. It is silently updated with new data and the current state is reflected on the page after every interval.
A bulb gauge configured for real time updates is shown below:
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" }
{
"chart": {
"caption": "Temperature status of deep freezers",
"upperlimit": "-5",
"lowerlimit": "-60",
"captionPadding": "30",
"showshadow": "0",
"showvalue": "1",
"useColorNameAsValue": "1",
"placeValuesInside": "1",
"valueFontSize": "16",
"plottooltext": "<span id='headerdiv' style='font-family:\"Arial\", \"Helvetica\";font-size: 13px;font-weight: bold;'>Current Temperature:</span>{br}<div id='valueDiv' style='color: #EEEEEE;text-align:center;font-size: 25px; padding: 10px; margin-top:5px;font-family:\"Arial\", \"Helvetica\";font-weight: bold;'>$value°C</div>",
"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: 'statusGauge',
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": "<span id='headerdiv' style='font-family:\"Arial\", \"Helvetica\";font-size: 13px;font-weight: bold;'>Current Temperature:</span>{br}<div id='valueDiv' style='color: #EEEEEE;text-align:center;font-size: 25px; padding: 10px; margin-top:5px;font-family:\"Arial\", \"Helvetica\";font-weight: bold;'>$value°C</div>",
//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;
evtObj.sender.feedData("&value=" + num);
}, 5000);
},
"disposed": function(evtObj, argObj) {
clearInterval(evtObj.sender.chartInterval);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>This bulb gauge shows temperature status of a deep freezer. The gauge shows a single value, which is the current temperature of the freezer. It is configured to change color and display a message in real-time based on the range the current temperature value falls in.
In this example, when the temperature falls below -35°C, the bulb turns red and a message is displayed that alerts you to take action because the temperature has fallen below the minimum value. Similarly, if the current temperature is in the range of -25°C and -5°C, the bulb turns green with a message indicating all is well and no action is required.
All gauges offered by FusionCharts Suite XT support real-time updates. For a detailed description on each gauge type, click the type-specific links given below:
Read ahead to understand how you can setup and work with real-time gauges.