Real-time Bulb Gauge | FusionCharts

The bulb 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 periodically, and auto-updates to reflect the current state of data. There are two different ways to update the bulb 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 data provider page on the server’s end, when invoked by the bulb 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.

In the simplest form, if you’re looking to update the bulb gauge, you need to output the data in the following format:

&amp;value=-5

Here, the output is a single value, -5. So, when the gauge will read this value, it will update the chart by setting its value to 25 (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 bulb gauge configured for real-time updates using JavaScript API looks like this:

Chart
JSON
XML
HTML

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:$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:$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 JavaScript API used to configure real-time updates:

Function Name	Parameter	Description
`feedData(strData)`	strData	This method is used to feed 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.
`getData()`	None	This method is used to return the data currently being shown by the gauge.
`setData(value)`	value	This method is used to set the data value for the gauge. The value should be within the limits of the gauge.

Configuring Real-time Updates Using Server-side Scripts

A bulb gauge configured for real-time updates using server-side script looks like this:

Chart
JSON
XML
HTML

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: $value°C", "dataStreamURL": "../../../resources/php/gauge-and-widgets-guide-bulb-gauge-real-time-gauges-php-1.php", "refreshInterval": "5", "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", "annotations": { "showbelow": "0", "groups": [ { "id": "valtext", "items": [ { "id": "valuetxt", "type": "text", "text": "-5°C", "alpha": "100", "font": "Helvetica Neue,Arial", "bold": "0", "fontSize": "14", "fontColor": "#00FF00", "x": "$chartEndX - 50", "y": "$chartStartY +60" } ] } ] } }

{
    "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: $value°C",
        "dataStreamURL": "../../../resources/php/gauge-and-widgets-guide-bulb-gauge-real-time-gauges-php-1.php",
        "refreshInterval": "5",
        "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",
    "annotations": {
        "showbelow": "0",
        "groups": [
            {
                "id": "valtext",
                "items": [
                    {
                        "id": "valuetxt",
                        "type": "text",
                        "text": "-5°C",
                        "alpha": "100",
                        "font": "Helvetica Neue,Arial",
                        "bold": "0",
                        "fontSize": "14",
                        "fontColor": "#00FF00",
                        "x": "$chartEndX - 50",
                        "y": "$chartStartY +60"
                    }
                ]
            }
        ]
    }
}

<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: $value°C",

            "dataStreamURL": "../../../resources/php/gauge-and-widgets-guide-bulb-gauge-real-time-gauges-php-1.php",
            "refreshInterval": "5",
            //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",
        //All annotations are grouped under this element
        "annotations": {
            "showbelow": "0",
            "groups": [{
                //Each group needs a unique ID
                "id": "valtext",
                "items": [{
                    "id": "valuetxt",
                    "type": "text",
                    "text": "-5°C",
                    "alpha": "100",
                    "font": "Helvetica Neue,Arial",
                    "bold": "0",
                    "fontSize": "14",
                    "fontColor": "#00FF00",
                    "x": "$chartEndX - 50",
                    "y": "$chartStartY +60"

                }]
            }]

        }
    },
    "events": {
        "renderComplete": function(evtObj, argObj) {
            var annotations = evtObj.sender.annotations,
                val = evtObj.sender.getData(),
                color = val && (val > -25) ? "#00fc00" : ((val <= -25 && val > -35) ? "#ff9900" : "#ff0000");
            annotations.update('valuetxt', {
                "text": "Temperature{br}" + val + "°C",
                "fontColor": color
            });
        },
        "realtimeUpdateComplete": function(evtObj, argObj) {
            var annotations = evtObj.sender.annotations,
                val = evtObj.sender.getData(),
                color = val && (val > -25) ? "#00ff00" : ((val <= -25 && val > -35) ? "#ff9900" : "#ff0000");
            annotations.update('valuetxt', {
                "text": "Temperature{br}" + val + "°C",
                "fontColor": color
            });
        }
    }
}
);
    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 needed to configure real-time updates from the server:

Attribute Name Description

dataStreamURL

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 dataStreamURL.

This page needs to be on the same sub-domain on which the chart is hosted and invoked from. Otherwise, security will restrict it from accessing the data and hence the real-time feature won’t work.

Example: dataStreamURL='liveQuote.aspx?name=xyz'

refreshInterval

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.

dataStamp

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

FusionCharts](/archive/3.11.3/chart-guide/real-time-charts/adding-data-stamp.html) article.

Stopping/Restarting Updates

A bulb gauge configured to stop receiving real-time updates looks like this:

Chart
JSON
XML
HTML

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: $value°C",
        "dataStreamURL": "../../../resources/php/gauge-and-widgets-guide-bulb-gauge-real-time-gauges-php-1.php",
        "refreshInterval": "5",
        "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: $value°C",

            "dataStreamURL": "../../../resources/php/gauge-and-widgets-guide-bulb-gauge-real-time-gauges-php-1.php",
            "refreshInterval": "5",
            //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": {
        'beforeRender': function(evt, args) {
            var chargePercent = 50,
                startStopBtn = document.getElementById('btnSU');

            if (!startStopBtn) {
                // Create button if it does not already exist
                startStopBtn = document.createElement('input');
                startStopBtn.setAttribute('id', 'btnSU');
                startStopBtn.setAttribute('type', 'button');
                startStopBtn.setAttribute('value', 'Stop Update');

                // Append button right after chart-container
                args.container.parentNode.insertBefore(startStopBtn, args.container.nextSibling);

            }

            startStopBtn.onclick = function() {
                var btnState = document.getElementById('btnSU').value;
                if (btnState === 'Stop Update') {
                    startStopBtn.setAttribute('value', 'Restart Update');
                    evt.sender.stopUpdate();
                } else {
                    startStopBtn.setAttribute('value', 'Stop Update');
                    evt.sender.restartUpdate();
                }
            };
        }
    }
}
);
    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
`stopUpdate()`	None	This method stops the chart from self-updating.
`restartUpdate()`	None	If you’ve stopped the real-time update of the chart, you can resume the update using this method.

Configuring Real-time Events

FusionCharts Suite XT introduces two events, realTimeUpdateComplete and realTimeUpdateError, to track real-time updates on gauges.

A real-time bulb gauge configured to listen to the realTimeUpdateComplete event looks like this:

Chart
JSON
XML
HTML

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", "chartBottomMargin": "45", "plottooltext": "Current Temperature: $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{br}not right!", "code": "#ff9900" }, { "minvalue": "-25", "maxvalue": "-5", "label": "All well ahoy!", "code": "#00ff00" } ] }, "value": "-5", "annotations": { "showbelow": "0", "groups": [ { "id": "valtext", "items": [ { "id": "background", "type": "rectangle", "alpha": "50", "fillColor": "#AABBCC", "x": "$chartCenterX-30", "tox": "$chartCenterX+30", "y": "$chartEndY-35", "toy": "$chartEndY-5" }, { "id": "valuetxt", "type": "text", "text": "-5°C", "alpha": "100", "font": "Helvetica Neue,Arial", "bold": "0", "fontSize": "14", "fontColor": "#00FF00", "x": "$chartCenterX", "y": "$chartEndY-20" } ] } ] } }

{
    "chart": {
        "caption": "Temperature status of deep freezers",
        "upperlimit": "-5",
        "lowerlimit": "-60",
        "captionPadding": "30",
        "showshadow": "0",
        "showvalue": "1",
        "useColorNameAsValue": "1",
        "placeValuesInside": "1",
        "valueFontSize": "16",
        "chartBottomMargin": "45",
        "plottooltext": "Current Temperature: $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{br}not right!",
                "code": "#ff9900"
            },
            {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }
        ]
    },
    "value": "-5",
    "annotations": {
        "showbelow": "0",
        "groups": [
            {
                "id": "valtext",
                "items": [
                    {
                        "id": "background",
                        "type": "rectangle",
                        "alpha": "50",
                        "fillColor": "#AABBCC",
                        "x": "$chartCenterX-30",
                        "tox": "$chartCenterX+30",
                        "y": "$chartEndY-35",
                        "toy": "$chartEndY-5"
                    },
                    {
                        "id": "valuetxt",
                        "type": "text",
                        "text": "-5°C",
                        "alpha": "100",
                        "font": "Helvetica Neue,Arial",
                        "bold": "0",
                        "fontSize": "14",
                        "fontColor": "#00FF00",
                        "x": "$chartCenterX",
                        "y": "$chartEndY-20"
                    }
                ]
            }
        ]
    }
}

<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",
            "chartBottomMargin": "45",

            //Tooltext
            "plottooltext": "Current Temperature: $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{br}not right!",
                "code": "#ff9900"
            }, {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }]
        },
        "value": "-5",
        //All annotations are grouped under this element
        "annotations": {
            "showbelow": "0",
            "groups": [{
                //Each group needs a unique ID
                "id": "valtext",
                "items": [{
                    "id": "background",
                    //Rectangle item
                    "type": "rectangle",
                    "alpha": "50",
                    "fillColor": "#AABBCC",
                    "x": "$chartCenterX-30",
                    "tox": "$chartCenterX+30",
                    "y": "$chartEndY-35",
                    "toy": "$chartEndY-5"
                }, {
                    "id": "valuetxt",
                    "type": "text",
                    "text": "-5°C",
                    "alpha": "100",
                    "font": "Helvetica Neue,Arial",
                    "bold": "0",
                    "fontSize": "14",
                    "fontColor": "#00FF00",
                    "x": "$chartCenterX",
                    "y": "$chartEndY-20",

                }]
            }]

        }
    },
    "events": {
        "rendered": function(evt, args) {
            updateAnnotation = function(evtObj, argObj) {
                var code,
                    textColor,
                    chartObj = evtObj.sender,
                    val = chartObj.getData(),
                    annotations = chartObj.annotations;

                if (val >= -24) {
                    code = "#00FF00";
                    textColor = "#000000";
                } else if (val < -24 && val > -35) {
                    code = "#ff9900";
                    textColor = "#0000ff";
                } else {
                    code = "#ff0000";
                    textColor = "#FFFFFF";
                }
                annotations.update("background", {
                    "fillColor": code
                });
                annotations.update('valuetxt', {
                    "text": val + "°C",
                    "fontColor": textColor
                });
            };
            evt.sender.chartInterval = setInterval(function() {
                var num = (Math.floor(Math.random() * 55) * -1) - 5;
                evt.sender.feedData("&value=" + num);
            }, 10000);
        },
        "renderComplete": function(evt, args) {
            updateAnnotation(evt, args);
        },
        "realtimeUpdateComplete": function(evt, args) {
            updateAnnotation(evt, args);
        },
        "disposed": function(evt, args) {
            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 realTimeUpdateComplete event:

Event Name Description

Event Name	Description
`realtimeUpdateComplete`	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: Real-time update using `datastreamURL` Real-time update using JavaScript API (using `setData`, `feedData`, `setDataForId` functions) Real-time update of the gauge through user interaction (through edit mode) The event arguments provided in the advanced model are: `eventObject`: This object contains the `eventId`, `eventType`, and `sender` properties. `argumentsObject`: This object contains the values of the updated data and the previous data.

realtimeUpdateComplete

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:

Real-time update using datastreamURL

Real-time update using JavaScript API (using setData, feedData, setDataForId functions)

Real-time update of the gauge through user interaction (through edit mode)

The event arguments provided in the advanced model are:

eventObject: This object contains the eventId, eventType, and sender properties.

argumentsObject: This object contains the values of the updated data and the previous data.

A bulb gauge configured to listen to the realTimeUpdateError event looks like this:

Chart
JSON
XML
HTML

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: $value°C",
        "dataStreamURL": "bulbData.php",
        "refreshInterval": "5",
        "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: $value°C",

            "dataStreamURL": "bulbData.php",
            "refreshInterval": "5",
            //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: {
        'beforeRender': function(evt, args) {
            // Create container div for data table
            var msgCont = document.createElement('div');
            msgCont.setAttribute('id', 'chart-message');
            //Set style for message container
            msgCont.style.cssText = 'width : 300px; min-height: 50px; color : #cc0000; font-family : Arial, Helvetica, sans-serif; font-size : 14px; margin-top : 10px;';
            // Append container div to page
            args.container.parentNode.insertBefore(msgCont, args.container.nextSibling);
        },
        'realtimeUpdateError': function(evt, args) {
            document.getElementById('chart-message').innerHTML = "<b>Error Occured !</b><br>Status Code : " + args.httpStatus;
            evt.sender.stopUpdate();
        }
    }
}
);
    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 realTimeUpdateError event:

Event Name	Description
`realtimeUpdateError`	This event is raised when an error occurs while performing real-time update using `datastreamURL`. The event arguments provided in the advanced model are: 1. `eventObject` : This object contains `eventId`, `eventType` and `sender` properties. 2. `argumentsObject` : This object contains the property listed below: a. `httpStatus` : It contains the HTTP Error status value as number (e.g., 404)

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 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 interactions on the local file system.