Simple Bulb Gauge Example
Bulb Gauges are used to indicate a specific dataset by utilizing a circle that changes color to indicate whether the monitored data is within the defined limits and if it is, then which limit does the data belong to. Colors can be selected to suit the application such as green for satisfactory, yellow for caution, and red for alarm.
In this section, you will be shown how you can create a simple bulb gauge.
Creating a Simple Bulb Gauge
For our example, we will create a bulb gauge that monitors the temperature status of deep freezers.
To create a bulb gauge, you need to:
-
Define the lower and upper limits (also known as the minimum and maximum values) for the gauge scale. For our example, we will set the lower limit to -60 and the upper limit to -5.
-
Divide the temperature values into pre-determined ranges, as shown below:
| Limits | Range Name | Color used to represent the Range |
|---|---|---|
-60°C to -35°C |
Mission control, we have a situation! |
Red |
-35°C to -25°C |
Something is just not right! |
Orange |
-25°C to -5°C |
All well ahoy! |
Green |
- Decide a data value to indicate the present temperature status. For our example, we will set the temperature to -5.
A bulb gauge created to monitor the temperature status of deep freezers looks like this:
{
"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:{br}$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:{br}$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 attributes used to create a simple bulb gauge:
| Attribute Name | Description |
|---|---|
|
It is used to specify the lower limit, or the minimum value, of the gauge scale, eg. -60. |
|
It is used to specify the upper limit, or the maximum value, of the gauge scale, eg. -5. |
|
It is used to specify the character which will be appended to the end of the number, eg. °C. |