Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

The linear 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 every n seconds, and silently updates itself to reflect the current state of data. There are two different ways to update the linear 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 real-time data format for linear gauge depends on:

  • Whether you’ve multiple pointers on the chart or a single pointer?

  • If you’ve multiple pointers, whether you want to provide data by pointer numerical index or by their defined IDs?

  • Whether you’re using Message Logger for the chart?

  • Commands for the chart - like stop update

Simple Example

Updating a Single Pointer

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

&value=75

Here, the output is a single value, 75. So, when the gauge will read this value, it will update the chart by setting its value to 75 (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 linear gauge configured to update the value of a single pointer looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "20", "valueFontSize": "11", "valueFontBold": "0", "gaugeFillMix": "{light-10},{light-70},{dark-10}", "gaugeFillRatio": "40,20,40" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low" }, { "minValue": "35", "maxValue": "70", "label": "Moderate" }, { "minValue": "70", "maxValue": "100", "label": "High" } ] }, "pointers": { "pointer": [ { "value": "75" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "20",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    }
}
<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: 'hlineargauge',
    renderAt: 'chart-container',
    id: 'cpu-linear-gauge-1',
    width: '400',
    height: '170',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Server CPU Utilization",
            "lowerLimit": "0",
            "upperLimit": "100",
            "numberSuffix": "%",
            "chartBottomMargin": "20",
            "valueFontSize": "11",
            "valueFontBold": "0",
            "gaugeFillMix": "{light-10},{light-70},{dark-10}",
            "gaugeFillRatio": "40,20,40"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
            }, {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
            }, {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
            }]
        },
        "pointers": {
            "pointer": [{
                "value": "75"
            }]
        }
    },
    "events": {
        "rendered": function(evtObj, argObj) {
            evtObj.sender.intervalVar = setInterval(function() {
                var prcnt = 65 + parseInt(Math.floor(Math.random() * 10), 10);
                FusionCharts.items["cpu-linear-gauge-1"].feedData("value=" + prcnt);
            }, 5000);
        },
        "disposed": function(evtObj, argObj) {
            clearInterval(evtObj.sender.intervalVar);
        }
    }
}
);
    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 methods used to configure real-time updates:

Function Name Parameter Description

feedData(strData)

strData

This method feeds 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.

Updating Multiple Pointers

If you have multiple pointers defined, you can update them all in a single update as shown in the following output from the real-time data provider page:

&value=34|25

Here, we are specifying two values in the real-time update. So, assuming that we have two pointers defined for the gauge , each one of them will take the values in sequence and update itself. Therefore, the first pointer will now show 34 and second one will show 25. The sequence of the pointers is determined by the order in which they are defined in the JSON/XML data.

A linear gauge configured to update multiple pointers looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "subcaption": "Transaction Server vs Web Server", "subcaptionFontBold": "0", "subCaptionFontSize": "12", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "valueAbovePointer": "1", "chartBottomMargin": "20", "valueFontSize": "11", "valueFontBold": "0", "gaugeFillMix": "{light-10},{light-70},{dark-10}", "gaugeFillRatio": "40,20,40" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low", "code": "#6baa01" }, { "minValue": "35", "maxValue": "70", "label": "Moderate", "code": "#f8bd19" }, { "minValue": "70", "maxValue": "100", "label": "High", "code": "#e44a00" } ] }, "pointers": { "pointer": [ { "value": "75", "bgColor": "#999999", "bgAlpha": "80", "tooltext": "Transaction Server: $value%" }, { "value": "92", "bgColor": "#444444", "bgAlpha": "80", "tooltext": "Web Server: $value%" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "subcaption": "Transaction Server vs Web Server",
        "subcaptionFontBold": "0",
        "subCaptionFontSize": "12",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "valueAbovePointer": "1",
        "chartBottomMargin": "20",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
                "code": "#6baa01"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
                "code": "#f8bd19"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
                "code": "#e44a00"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75",
                "bgColor": "#999999",
                "bgAlpha": "80",
                "tooltext": "Transaction Server: $value%"
            },
            {
                "value": "92",
                "bgColor": "#444444",
                "bgAlpha": "80",
                "tooltext": "Web Server: $value%"
            }
        ]
    }
}
<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: 'hlineargauge',
    renderAt: 'chart-container',
    id: 'cpu-linear-gauge-2',
    width: '400',
    height: '170',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Server CPU Utilization",
            "subcaption": "Transaction Server vs Web Server",
            "subcaptionFontBold": "0",
            "subCaptionFontSize": "12",
            "lowerLimit": "0",
            "upperLimit": "100",
            "numberSuffix": "%",
            "valueAbovePointer": "1",
            "chartBottomMargin": "20",
            "valueFontSize": "11",
            "valueFontBold": "0",
            "gaugeFillMix": "{light-10},{light-70},{dark-10}",
            "gaugeFillRatio": "40,20,40"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
                "code": "#6baa01"
            }, {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
                "code": "#f8bd19"
            }, {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
                "code": "#e44a00"
            }]
        },
        "pointers": {
            //Multiple pointers defined here
            "pointer": [{
                "value": "75",
                "bgColor": "#999999",
                "bgAlpha": "80",
                "tooltext": "Transaction Server: $value%"
            }, {
                "value": "92",
                "bgColor": "#444444",
                "bgAlpha": "80",
                "tooltext": "Web Server: $value%"
            }]
        }
    },
    "events": {
        "rendered": function(evtObj, argObj) {
            evtObj.sender.intervalVar = setInterval(function() {
                //Updating widget with randomly generated values
                //Range 60-70%
                var ggPrcnt = 60 + parseInt(Math.floor(Math.random() * 10), 10),
                    //Range 75-85%
                    bcPrcnt = 75 + parseInt(Math.floor(Math.random() * 10), 10);
                FusionCharts.items["cpu-linear-gauge-2"].feedData("value=" + ggPrcnt + "|" + bcPrcnt);
            }, 5000);
        },
        "disposed": function(evtObj, argObj) {
            clearInterval(evtObj.sender.intervalVar);
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Updating Pointer(s) using the Named ID

Another way to update pointers is by defining a unique ID for each pointer and then passing the updated data value to the ID.

To define unique IDs for pointers, you can use the code snippet shown below:

"pointers": {
       "pointer": [
        {
            ...
            "id": "gGrovePointer",
            ...
        },
        {
            ...
            "id": "bFieldPointer",
            ...
        }
    ]
}

You can now update each of these named pointers as shown in the following output in your real-time data stream:

&gGrovePointer=65&bFieldPointer=80

This will change the value of pointer 1 (having the id gGrovePointer) to 65 and pointer 2 (having the id bFieldPointer) to 80.

A linear gauge configured to update the values of multiple pointers using named IDs looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "subcaption": "Transaction Server vs Web Server", "subcaptionFontBold": "0", "subCaptionFontSize": "12", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "valueAbovePointer": "0", "chartBottomMargin": "20", "valueFontSize": "11", "valueFontBold": "0", "gaugeFillMix": "{light-10},{light-70},{dark-10}", "gaugeFillRatio": "40,20,40" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low", "code": "#6baa01" }, { "minValue": "35", "maxValue": "70", "label": "Moderate", "code": "#f8bd19" }, { "minValue": "70", "maxValue": "100", "label": "High", "code": "#e44a00" } ] }, "pointers": { "pointer": [ { "id": "transServer", "value": "75", "bgColor": "#999999", "bgAlpha": "80", "tooltext": "Transaction Server: $value%" }, { "id": "webServer", "value": "92", "bgColor": "#444444", "bgAlpha": "80", "tooltext": "Web Server: $value%" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "subcaption": "Transaction Server vs Web Server",
        "subcaptionFontBold": "0",
        "subCaptionFontSize": "12",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "valueAbovePointer": "0",
        "chartBottomMargin": "20",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
                "code": "#6baa01"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
                "code": "#f8bd19"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
                "code": "#e44a00"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "id": "transServer",
                "value": "75",
                "bgColor": "#999999",
                "bgAlpha": "80",
                "tooltext": "Transaction Server: $value%"
            },
            {
                "id": "webServer",
                "value": "92",
                "bgColor": "#444444",
                "bgAlpha": "80",
                "tooltext": "Web Server: $value%"
            }
        ]
    }
}
<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: 'hlineargauge',
    renderAt: 'chart-container',
    id: 'cpu-linear-gauge-3',
    width: '400',
    height: '170',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Server CPU Utilization",
            "subcaption": "Transaction Server vs Web Server",
            "subcaptionFontBold": "0",
            "subCaptionFontSize": "12",
            "lowerLimit": "0",
            "upperLimit": "100",
            "numberSuffix": "%",
            "valueAbovePointer": "0",
            "chartBottomMargin": "20",
            "valueFontSize": "11",
            "valueFontBold": "0",
            "gaugeFillMix": "{light-10},{light-70},{dark-10}",
            "gaugeFillRatio": "40,20,40"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
                "code": "#6baa01"
            }, {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
                "code": "#f8bd19"
            }, {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
                "code": "#e44a00"
            }]
        },
        "pointers": {
            //Multiple pointers defined here
            "pointer": [{
                "id": "transServer",
                "value": "75",
                "bgColor": "#999999",
                "bgAlpha": "80",
                "tooltext": "Transaction Server: $value%"
            }, {
                "id": "webServer",
                "value": "92",
                "bgColor": "#444444",
                "bgAlpha": "80",
                "tooltext": "Web Server: $value%"
            }]
        }
    },
    "events": {
        "rendered": function(evtObj, argObj) {
            evtObj.sender.intervalVar = setInterval(function() {
                //Updating widget with randomly generated values
                //Transaction server Range 60-70%
                var trnPrcnt = 60 + parseInt(Math.floor(Math.random() * 10), 10),
                    //Web server Range 75-85%
                    webPrcnt = 75 + parseInt(Math.floor(Math.random() * 10), 10);
                FusionCharts.items["cpu-linear-gauge-3"].setDataForId("transServer", trnPrcnt);
                FusionCharts.items["cpu-linear-gauge-3"].setDataForId("webServer", webPrcnt);
            }, 5000);
        },
        "disposed": function(evtObj, argObj) {
            clearInterval(evtObj.sender.intervalVar);
        }
    }
}
);
    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 methods used to update pointers using their IDs:

Function Name Parameter Description

feedData(strData)

strData

This method feeds 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(pointerIndex)

pointerIndex

This method returns the data for the given pointer index on the chart. The first pointer is represented by index 1, second by 2, and so on.

getDataForId(pointerId)

pointerId

This method returns the data for the given pointer using its defined ID.

setData(pointerIndex, value)

pointerIndex, value

This method sets the data for the given pointer index on the chart. The first pointer is represented by index 1, second by 2 and so on.

setDataForId(pointerId, value)

pointerId, value

This method returns the data for the given pointer using its defined ID.

You can call the JavaScript APIs of a chart only after it has rendered.

Retrieving Data from the Gauge

We can retrieve data from gauge once the data has been updated.

A linear gauge configured to retrieve updated data looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "20", "valueFontSize": "11", "valueFontBold": "0", "gaugeFillMix": "{light-10},{light-70},{dark-10}", "gaugeFillRatio": "40,20,40" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low" }, { "minValue": "35", "maxValue": "70", "label": "Moderate" }, { "minValue": "70", "maxValue": "100", "label": "High" } ] }, "pointers": { "pointer": [ { "value": "75" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "20",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    }
}
<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: 'hlineargauge',
    renderAt: 'chart-container',
    id: 'cpu-linear-gauge-4',
    width: '400',
    height: '170',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Server CPU Utilization",
            "lowerLimit": "0",
            "upperLimit": "100",
            "numberSuffix": "%",
            "chartBottomMargin": "20",
            "valueFontSize": "11",
            "valueFontBold": "0",
            "gaugeFillMix": "{light-10},{light-70},{dark-10}",
            "gaugeFillRatio": "40,20,40"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
            }, {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
            }, {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
            }]
        },
        "pointers": {
            "pointer": [{
                "value": "75"
            }]
        }
    },
    "events": {
        'beforeRender': function(evt, args) {
            // creating div for controllers
            var controllers = document.createElement('div');

            // Create radio buttons inside div
            controllers.innerHTML = '<input type="button" value="Get Data" id="getdata_btn" style="margin-left:5px;margin-top:5px;"/><div id="tableView" style="margin: 3px;padding:5px;float: left;"></div>';
            // set css style for controllers div
            controllers.style.cssText = '';
            args.container.appendChild(controllers);
            controllers.setAttribute('id', 'controllers');
        },
        "renderComplete": function(evtObj, argObj) {
            evtObj.sender.intervalVar = setInterval(function() {
                var prcnt = 65 + parseInt(Math.floor(Math.random() * 10), 10);
                FusionCharts.items["cpu-linear-gauge-4"].feedData("value=" + prcnt);
            }, 5000);

            //Format minutes, seconds by adding 0 prefix accordingly
            function formatTime(time) {
                (time < 10) ? (time = "0" + time) : (time = time);
                return time;
            }

            function showData() {
                //Retrieving the data
                var dataVal = FusionCharts.items["cpu-linear-gauge-4"].getData(1),
                    str = "",
                    currDate = new Date(),
                    label = formatTime(currDate.getHours()) + ":" + formatTime(currDate.getMinutes()) + ":" + formatTime(currDate.getSeconds());
                //Creating the table format
                str += '<table border="1" cellpadding="1" cellspacing="0" bordercolor="#cccccc" width="320px">';
                str += '    <tr>';
                str += '        <td width="50%" style="font-weight: bold;font-size: 14px;padding: 3px;">Current Time</td>';
                str += '        <td width="50%" style="font-weight: bold;font-size: 14px;padding: 3px;">Current Utilization</td>';
                str += '    </tr>';
                str += '    <tr>';
                str += '        <td width="50%" style="padding: 3px;" align="center">' + label + '</td>';
                str += '        <td width="50%" style="padding: 3px;" align="center">' + dataVal + '</td>';
                str += '    </tr>';
                //Preparing html string to create the table with data

                str += '</table>';
                //Showing the table
                document.getElementById("tableView").style.cssText = 'overflow-y:auto;display:block;margin-top:5px';
                document.getElementById("tableView").innerHTML = str;
            }

            document.getElementById("getdata_btn").addEventListener("click", showData);

        },
        "disposed": function(evtObj, argObj) {
            clearInterval(evtObj.sender.intervalVar);
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

The data structure needed to retrieve updated data is as follows:

Real-time Updates using Server-side Script

An LED gauge updated in real-time using a server-side script looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "subcaption": "food.hsm.com", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "40", "valueFontSize": "11", "valueFontBold": "0", "dataStreamUrl": "../../../resources/php/gauge-and-widgets-guide-linear-gauge-real-time-gauges-php-1.php", "refreshInterval": "10" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low", "code": "#6baa01" }, { "minValue": "35", "maxValue": "70", "label": "Moderate", "code": "#f8bd19" }, { "minValue": "70", "maxValue": "100", "label": "High", "code": "#e44a00" } ] }, "pointers": { "pointer": [ { "value": "75" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "subcaption": "food.hsm.com",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "40",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "dataStreamUrl": "../../../resources/php/gauge-and-widgets-guide-linear-gauge-real-time-gauges-php-1.php",
        "refreshInterval": "10"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
                "code": "#6baa01"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
                "code": "#f8bd19"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
                "code": "#e44a00"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    }
}
<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: 'hlineargauge',
    renderAt: 'chart-container',
    id: 'cs-linear-gauge-5',
    width: '400',
    height: '170',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Server CPU Utilization",
            "subcaption": "food.hsm.com",
            "lowerLimit": "0",
            "upperLimit": "100",
            "numberSuffix": "%",
            "chartBottomMargin": "40",
            "valueFontSize": "11",
            "valueFontBold": "0",
            "dataStreamUrl": "../../../resources/php/gauge-and-widgets-guide-linear-gauge-real-time-gauges-php-1.php",
            "refreshInterval": "10"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
                "code": "#6baa01"
            }, {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
                "code": "#f8bd19"
            }, {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
                "code": "#e44a00"
            }]
        },
        "pointers": {
            "pointer": [{
                "value": "75"
            }]
        }

    }
}
);
    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 configure real-time updates using server-side scripts:

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 attribute. 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.2/chart-guide/real-time-charts/adding-data-stamp.html) article.

Stopping/Restarting Updates

An LED gauge configured to stop and restart receiving real-time updates looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "subcaption": "food.hsm.com", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "40", "valueFontSize": "11", "valueFontBold": "0", "dataStreamUrl": "../../../resources/php/gauge-and-widgets-guide-linear-gauge-real-time-gauges-php-2.php", "refreshInterval": "10" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low", "code": "#6baa01" }, { "minValue": "35", "maxValue": "70", "label": "Moderate", "code": "#f8bd19" }, { "minValue": "70", "maxValue": "100", "label": "High", "code": "#e44a00" } ] }, "pointers": { "pointer": [ { "value": "75" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "subcaption": "food.hsm.com",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "40",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "dataStreamUrl": "../../../resources/php/gauge-and-widgets-guide-linear-gauge-real-time-gauges-php-2.php",
        "refreshInterval": "10"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
                "code": "#6baa01"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
                "code": "#f8bd19"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
                "code": "#e44a00"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    }
}
<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: 'hlineargauge',
    renderAt: 'chart-container',
    id: 'cs-linear-gauge-6',
    width: '400',
    height: '170',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Server CPU Utilization",
            "subcaption": "food.hsm.com",
            "lowerLimit": "0",
            "upperLimit": "100",
            "numberSuffix": "%",
            "chartBottomMargin": "40",
            "valueFontSize": "11",
            "valueFontBold": "0",
            "dataStreamUrl": "../../../resources/php/gauge-and-widgets-guide-linear-gauge-real-time-gauges-php-2.php",
            "refreshInterval": "10"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
                "code": "#6baa01"
            }, {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
                "code": "#f8bd19"
            }, {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
                "code": "#e44a00"
            }]
        },
        "pointers": {
            "pointer": [{
                "value": "75"
            }]
        }

    },
    "events": {
        'beforeRender': function(evtObj, argObj) {
            // creating div for controllers
            var controllers = document.createElement('div');
            // Create radio buttons inside div
            controllers.innerHTML = '<input type="button" value="Stop Update" id="toggleBtn" style="margin-left:5px;margin-top:5px;font-size:13px;padding:2px;" />';
            argObj.container.appendChild(controllers);
            controllers.setAttribute('id', 'controllers');
        },
        'renderComplete': function(evtObj, argObj) {

            var isStopped = false,
                startStopUpdate = function() {
                    if (!isStopped) {
                        isStopped = true;
                        document.getElementById("toggleBtn").value = "Restart Update";
                        FusionCharts.items["cs-linear-gauge-6"].stopUpdate();
                    } else {
                        isStopped = false;
                        document.getElementById("toggleBtn").value = "Stop Update";
                        FusionCharts.items["cs-linear-gauge-6"].restartUpdate();
                    }
                }

            document.getElementById("toggleBtn").addEventListener("click", startStopUpdate);
        }
    }
}
);
    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 is used to stop the gauge from self-updating.

restartUpdate()

None

If you have stopped the gauge from updating itself in real-time, this method is used to restart the updates.

Configuring Real-time Events

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

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

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "40", "valueFontSize": "11", "valueFontBold": "0", "showValue": "0", "gaugeFillMix": "{light-10},{light-70},{dark-10}", "gaugeFillRatio": "40,20,40" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low" }, { "minValue": "35", "maxValue": "70", "label": "Moderate" }, { "minValue": "70", "maxValue": "100", "label": "High" } ] }, "pointers": { "pointer": [ { "value": "75" } ] }, "annotations": { "origw": "400", "origh": "190", "autoscale": "1", "groups": [ { "id": "range", "items": [ { "id": "rangeBg", "type": "rectangle", "x": "$chartCenterX-70", "y": "$chartEndY-35", "tox": "$chartCenterX +70", "toy": "$chartEndY-15", "fillcolor": "#ff6650" }, { "id": "rangeText", "type": "Text", "fontSize": "11", "fillcolor": "#000000", "text": "Currently Utilizing 75%", "x": "$chartCenterX", "y": "$chartEndY-25" } ] } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "40",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "showValue": "0",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    },
    "annotations": {
        "origw": "400",
        "origh": "190",
        "autoscale": "1",
        "groups": [
            {
                "id": "range",
                "items": [
                    {
                        "id": "rangeBg",
                        "type": "rectangle",
                        "x": "$chartCenterX-70",
                        "y": "$chartEndY-35",
                        "tox": "$chartCenterX +70",
                        "toy": "$chartEndY-15",
                        "fillcolor": "#ff6650"
                    },
                    {
                        "id": "rangeText",
                        "type": "Text",
                        "fontSize": "11",
                        "fillcolor": "#000000",
                        "text": "Currently Utilizing 75%",
                        "x": "$chartCenterX",
                        "y": "$chartEndY-25"
                    }
                ]
            }
        ]
    }
}
<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: 'hlineargauge',
    renderAt: 'chart-container',
    id: 'cpu-linear-gauge-7',
    width: '400',
    height: '170',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Server CPU Utilization",
            "lowerLimit": "0",
            "upperLimit": "100",
            "numberSuffix": "%",
            "chartBottomMargin": "40",
            "valueFontSize": "11",
            "valueFontBold": "0",
            "showValue": "0",
            "gaugeFillMix": "{light-10},{light-70},{dark-10}",
            "gaugeFillRatio": "40,20,40"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
            }, {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
            }, {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
            }]
        },
        "pointers": {
            "pointer": [{
                "value": "75"
            }]
        },
        "annotations": {
            "origw": "400",
            "origh": "190",
            "autoscale": "1",
            "groups": [{
                "id": "range",
                "items": [{
                    "id": "rangeBg",
                    "type": "rectangle",
                    "x": "$chartCenterX-70",
                    "y": "$chartEndY-35",
                    "tox": "$chartCenterX +70",
                    "toy": "$chartEndY-15",
                    "fillcolor": "#ff6650"
                }, {
                    "id": "rangeText",
                    "type": "Text",
                    "fontSize": "11",
                    "fillcolor": "#000000",
                    "text": "Currently Utilizing 75%",
                    "x": "$chartCenterX",
                    "y": "$chartEndY-25"
                }]
            }]
        }
    },
    "events": {
        "rendered": function(evtObj, argObj) {
            evtObj.sender.intervalVar = setInterval(function() {
                var prcnt = 65 + parseInt(Math.floor(Math.random() * 10), 10);
                FusionCharts.items["cpu-linear-gauge-7"].feedData("value=" + prcnt);
            }, 5000);
        },
        "realTimeUpdateComplete": function(evt, arg) {
            var annotations = evt.sender.annotations,
                percentValue = evt.sender.getData(1),
                colorVal = "#" + ((percentValue > 70) ? "ff6650" : "f6bd11");
            annotations && annotations.update('rangeText', {
                "text": "Currently Utilizing " + percentValue + "%"
            });
            annotations && annotations.update('rangeBg', {
                "fillcolor": colorVal
            });

        },
        "disposed": function(evtObj, argObj) {
            clearInterval(evtObj.sender.intervalVar);
        }
    }
}
);
    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.

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

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 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 JavaScript interactions on local file system, unless otherwise specifically set.

Top