Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

Real-time gauges are used when a single value is of interest and has to be monitored constantly. For example, if you want to monitor the forex rate, you can use a real-time gauge to display the current currency value, at every set interval. Based on the rates, if you intend to trade or take suitable action, you can use events to track the updates and trigger appropriate functions.

To know more about how to configure a real-time gauge, click here.

FusionCharts Suite XT offers two real-time events:

  • realTimeUpdateComplete()

  • realTimeUpdateError()

The realtimeUpdateComplete() Event

This event is triggered every time the gauge updates itself with new data, in one of the following ways:

  • through datastreamURL

  • through JavaScript API methods [setData(), feedData(), setDataForId()]

  • through user interaction (Angular and Linear gauges provide an edit mode in which the

    user can directly update the value on the gauge)

A real-time thermometer gauge configured to listen to the realTimeUpdateComplete() event is shown below:

FusionCharts will load here..
{ "chart": { "caption": "Temperature Monitor", "subcaption": " Central cold store", "lowerLimit": "-10", "upperLimit": "0", "decimals": "1", "numberSuffix": "°C", "showhovereffect": "1", "thmFillColor": "#008ee4", "showGaugeBorder": "1", "gaugeBorderColor": "#008ee4", "gaugeBorderThickness": "2", "gaugeBorderAlpha": "30", "thmOriginX": "100", "chartBottomMargin": "20", "valueFontColor": "#000000", "theme": "fint" }, "value": "-6", "annotations": { "showbelow": "0", "groups": [ { "id": "indicator", "items": [ { "id": "background", "type": "rectangle", "alpha": "50", "fillColor": "#AABBCC", "x": "$gaugeEndX-40", "tox": "$gaugeEndX", "y": "$gaugeEndY+54", "toy": "$gaugeEndY+72" } ] } ] } }
{
    "chart": {
        "caption": "Temperature Monitor",
        "subcaption": " Central cold store",
        "lowerLimit": "-10",
        "upperLimit": "0",
        "decimals": "1",
        "numberSuffix": "°C",
        "showhovereffect": "1",
        "thmFillColor": "#008ee4",
        "showGaugeBorder": "1",
        "gaugeBorderColor": "#008ee4",
        "gaugeBorderThickness": "2",
        "gaugeBorderAlpha": "30",
        "thmOriginX": "100",
        "chartBottomMargin": "20",
        "valueFontColor": "#000000",
        "theme": "fint"
    },
    "value": "-6",
    "annotations": {
        "showbelow": "0",
        "groups": [
            {
                "id": "indicator",
                "items": [
                    {
                        "id": "background",
                        "type": "rectangle",
                        "alpha": "50",
                        "fillColor": "#AABBCC",
                        "x": "$gaugeEndX-40",
                        "tox": "$gaugeEndX",
                        "y": "$gaugeEndY+54",
                        "toy": "$gaugeEndY+72"
                    }
                ]
            }
        ]
    }
}
<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: 'thermometer',
    renderAt: 'chart-container',
    id: 'myThm',
    width: '240',
    height: '310',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Temperature Monitor",
            "subcaption": " Central cold store",
            "lowerLimit": "-10",
            "upperLimit": "0",
            "decimals": "1",
            "numberSuffix": "°C",
            "showhovereffect": "1",
            "thmFillColor": "#008ee4",
            "showGaugeBorder": "1",
            "gaugeBorderColor": "#008ee4",
            "gaugeBorderThickness": "2",
            "gaugeBorderAlpha": "30",
            "thmOriginX": "100",
            "chartBottomMargin": "20",
            "valueFontColor": "#000000",
            "theme": "fint"
        },
        "value": "-6",
        //All annotations are grouped under this element
        "annotations": {
            "showbelow": "0",
            "groups": [{
                //Each group needs a unique ID
                "id": "indicator",
                "items": [
                    //Showing Annotation
                    {
                        "id": "background",
                        //Rectangle item 
                        "type": "rectangle",
                        "alpha": "50",
                        "fillColor": "#AABBCC",
                        "x": "$gaugeEndX-40",
                        "tox": "$gaugeEndX",
                        "y": "$gaugeEndY+54",
                        "toy": "$gaugeEndY+72"
                    }
                ]
            }]

        },
    },
    "events": {
        "initialized": function(evt, arg) {
            evt.sender.chartInterval = setInterval(function() {
                var value,
                    prevTemp = FusionCharts.items["myThm"].getData(),
                    mainTemp = (Math.random() * 10) * (-1),
                    diff = Math.abs(prevTemp - mainTemp);
                // generate data to be fed to the gauge
                diff = diff > 1 ? (Math.random() * 1) : diff;
                if (mainTemp > prevTemp) {
                    value = prevTemp + diff;
                } else {
                    value = prevTemp - diff;
                }
                // feed new data to the gauge
                FusionCharts.items["myThm"].feedData("&value=" + value);
                // set the time interval    
            }, 3000);
            // use annotation to display the current value
            updateAnnotation = function(evtObj, argObj) {
                var code,
                    chartObj = evtObj.sender,
                    val = chartObj.getData(),
                    annotations = chartObj.annotations;
                // if temperature is greater than -4.5 C, color the annotation green
                if (val >= -4.5) {
                    code = "#00FF00";
                }
                // if temperature is between -4.5 C & -6 C, color the annotation orange
                else if (val < -4.5 && val > -6) {
                    code = "#ff9900";
                }
                // for all other values of temperature, color the annotation red
                else {
                    code = "#ff0000";
                }
                annotations.update("background", {
                    "fillColor": code
                });
            };
        },
        "renderComplete": function(evt, arg) {
            updateAnnotation(evt, arg);
        },
        // event to track new data
        "realtimeUpdateComplete": function(evt, arg) {
            updateAnnotation(evt, arg);
        },
        "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>

The gauge displays the current temperature at Central Cold Store. When the temperature changes, the event realTimeUpdateComplete() is triggered. Consequently, the gauge and the annotation are updated.

A brief description of the realTimeUpdateComplete() event is as follows:

Event Name Parameters

realtimeUpdateComplete(eventObject, argumentsObject)

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

argumentsObject: contains the following properties:

  • prevData : previous value fed to the gauge
  • source : method in which data is fed to the gauge - feeddata or XmlHttpRequest
  • updateObject : contains the actual data received
  • url : the URL of data source if the source is XmlHttpRequest; else null

The realTimeUpdateError() Event

This event is triggered when an error occurs while a gauge is updated in real-time, using datastreamURL.

A thermometer gauge configured to listen to the realTimeUpdateError() event is shown below:

FusionCharts will load here..
{ "chart": { "caption": "Temperature Monitor", "subcaption": " Central cold store", "lowerLimit": "-10", "upperLimit": "0", "numberSuffix": "°C", "decimals": "1", "showhovereffect": "1", "thmFillColor": "#008ee4", "showGaugeBorder": "1", "gaugeBorderColor": "#008ee4", "gaugeBorderThickness": "2", "gaugeBorderAlpha": "30", "thmOriginX": "100", "dataStreamURL": "thermometerData.php", "refreshInterval": "5", "theme": "fint" }, "value": "-6" }
{
    "chart": {
        "caption": "Temperature Monitor",
        "subcaption": " Central cold store",
        "lowerLimit": "-10",
        "upperLimit": "0",
        "numberSuffix": "°C",
        "decimals": "1",
        "showhovereffect": "1",
        "thmFillColor": "#008ee4",
        "showGaugeBorder": "1",
        "gaugeBorderColor": "#008ee4",
        "gaugeBorderThickness": "2",
        "gaugeBorderAlpha": "30",
        "thmOriginX": "100",
        "dataStreamURL": "thermometerData.php",
        "refreshInterval": "5",
        "theme": "fint"
    },
    "value": "-6"
}
<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: 'thermometer',
    renderAt: 'chart-container',
    id: 'myThm-2',
    width: '240',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Temperature Monitor",
            "subcaption": " Central cold store",
            "lowerLimit": "-10",
            "upperLimit": "0",
            "numberSuffix": "°C",
            "decimals": "1",
            "showhovereffect": "1",
            "thmFillColor": "#008ee4",
            "showGaugeBorder": "1",
            "gaugeBorderColor": "#008ee4",
            "gaugeBorderThickness": "2",
            "gaugeBorderAlpha": "30",
            "thmOriginX": "100",
            "dataStreamURL": "thermometerData.php",
            "refreshInterval": "5",
            "theme": "fint"
        },
        "value": "-6"
    },
    "events": {
        "beforeRender": function(evtObj, argObj) {
            // creating div for controllers
            var controllers = document.createElement('div');

            // Create radio buttons inside div
            controllers.innerHTML = '<div id="chart-message"></div>';
            // set css style for controllers div
            controllers.style.cssText = 'text-align: center;min-height: 50px;color : #cc0000;font-family : Arial, Helvetica, sans-serif;font-size : 14px;margin-top : 10px';
            argObj.container.appendChild(controllers);
            controllers.setAttribute('id', 'controllers');
        },
        "realtimeUpdateError": function(evtObj, argObj) {
            document.getElementById('chart-message').innerHTML = "<b>Error: Problem updating the gauge!</b>";
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Here, the URL is set to thermometerData.php which does not exist. Hence, the page returns an error and this is captured by the realTimeUpdateError() event that displays an error message.

A brief description of the realTimeUpdateError() event is as follows:

Attribute Name Parameters

realtimeUpdateError(eventObject, argumentsObject)

eventObject: contains eventId, eventType and sender properties.

argumentsObject: contains the following properties:

  • httpStatus: the HTTP Error status value as a number (for example, 404)
  • error: kind of error
  • source: method using which data is fed to the gauge- feeddata or xmlHttpRequest
  • url: the URL of data source if the source is xmlhttpRequest; else null
Top