Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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:

FusionCharts will load here..
{ "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" }
{
    "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

lowerLimit

It is used to specify the lower limit, or the minimum value, of the gauge scale, eg. -60.

upperLimit

It is used to specify the upper limit, or the maximum value, of the gauge scale, eg. -5.

numberSuffix

It is used to specify the character which will be appended to the end of the number, eg. °C.

Top