Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

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:

&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:

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" }
{
    "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:

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](/dev/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:

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" }
{
    "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:

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

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:

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" }
{
    "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.

Top