Setting Up Real-time Gauges

FusionCharts Suite XT offers gauges that can be fed with real-time data periodically and can render the new data without a page refresh.

You can feed real-time data to a gauge in two ways:

• Using JavaScript API methods

• Using server-side scripts

Using JavaScript API Methods

If new data is flowing into your system at client side, you can feed data to the gauge in real time using the method, feedData(strData). The parameter strData is a string value that contains the real-time, latest data and can be fed to the gauge.

A cylinder gauge fed with real-time data using the feedData() method is shown below:

The gauge is configured to show the current diesel level in a generator. The fuel level in the cylinder increases or decreases indicating the current diesel value marked on it. Current data is also displayed at the bottom of the cylinder after every preset interval is elapsed.

The code snippet to feed real-time data to the gauge using the feedData() method is shown below:

// Initial value
"value": "110"
},
"events": {
    "rendered": function(evtObj, argObj) {
        var fuelVolume = 110;
        setInterval(function() {
            (fuelVolume < 10) ? (fuelVolume = 110) : "";
            var consVolume = fuelVolume - (Math.floor(Math.random() * 3));
            // feed data to the cylinder gauge, fuelMeter
            evtObj.sender.feedData("&value=" + consVolume);
            fuelVolume = consVolume;
        }, 1000); // set the refresh interval to 1000 ms
    }
}

The time interval for the gauge update has to be defined in milliseconds.

Using Server-side Scripts

In instances where you have to monitor the status of an application/system constantly and the data is coming in from a server, you can use server-side scripts to poll the server for new data. This real-time data can be fed to a gauge to reflect the current status periodically.

An angular gauge updated with real-time data from a server is shown below:

In the above example, server CPU utilization of foods.hsm.com and garments.hsm.com is indicated on the angular gauge by two dials. The black dial shows the CPU utilization of the former and the gray dial shows the CPU utilization of the later website.

The gauge is color-coded to indicate levels of CPU utilization as follows:

• Low - green

• Moderate - yellow

• High - red.

The gauge is configured to poll the server at http://static.fusioncharts.com/sampledata/php/serverLoad.php every 5 seconds for the current utilization value through the datastreamURL parameter.

The server page has to be on the same domain on which the gauge is hosted.

The server returns the new data for both sites to the gauge at once. This can be achieved by passing the data in a pipe separated form, as shown below:

&value = 85|60

The dials pick up data sequentially and indicate the updated value on the gauge. The order of the dials is defined in the script. Here, the black dial points to 85 and the gray dial points to 60.

The refreshInterval has to be specified in seconds.

The data structure to set up the gauge using server-side script is shown below:

• JSON
• XML

{
    "chart": {
        "caption": "Server CPU Utilization",
        "subcaption": "foods.hsm.com & garments.hsm.com",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "dataStreamUrl": "../../../resources/php/advanced-charting-real-time-gauges-setting-up-real-time-gauges-php-1.php",
        "refreshInterval": "5",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
                "code": "#1aaf5d"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
                "code": "#f2c500"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
                "code": "#c02d00"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "id": "fd_dial",
                "value": "72.5",
                "tooltext": "foods.hsm.com : $value"
            },
            {
                "id": "clth_dial",
                "value": "64.8",
                "alpha": "40",
                "tooltext": "garments.hsm.com : $value"
            }
        ]
    }
}

Stopping/Restarting Real-time Updates

You can stop real-time updates in two ways:

• Using stopUpdate() method-when the feedData() method is used to fetch real-time data

• Using the stopUpdate command from the server-when a server-side script is used to fetch real-time data

Using the stopUpdate() Method

A thermometer gauge configured to stop and restart receiving real-time updates is shown below:

In the above example, the gauge reflects the current temperature at Central Cold Store. The real-time data is also displayed at the bottom of the thermometer. To stop updating the data, click Stop Update. The gauge is not fed with real time data anymore. To resume real-time updates, click Restart Update.

The JavaScript API methods to stop and restart real-time updates are as follows:

The data structure to stop and restart real-time updates is shown below:

• JSON
• XML

{
    "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": "../../../resources/php/advanced-charting-real-time-gauges-setting-up-real-time-gauges-php-2.php",
        "refreshInterval": "5",
        "theme": "fint"
    },
    "value": "-6"
}

Using a Command From the Server

A real-time gauge stops polling the server for further updates when it receives the following command from the server:

&stopUpdate=1

After stopping the update, it can be restarted either using user interaction or using the client-side JavaScript API method, restartUpdate(), described earlier.