Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

Gauges can be set to update in real time, either programmatically or by polling the server for data. To know more about how to configure a real-time gauge, click here.

Real-time gauges can be made more intuitive by setting an alert that indicates when a defined set of threshold data values are reached.

For example, if you are monitoring the CPU utilization on the server and want to display a warning message when it goes above 70%, you can set an alert using the Alert Manager.

An angular gauge configured to do this is shown below:

FusionCharts will load here..
{ "chart": { "caption": "Server CPU Utilization", "subcaption": " at akme.com", "lowerLimit": "0", "upperLimit": "100", "showValue": "1", "valueBelowPivot": "1", "tickValueDistance": "15", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "##6baa01 " }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "e44a00" } ] }, "dials": { "dial": [ { "id": "crntYr", "value": "50", "showValue": "1", "tooltext": "Current utilization : $value", "rearExtension": "15" } ] }, "alerts": { "alert": [ { "minvalue": "70", "maxvalue": "100", "action": "callJS", "param": "showAlert('Current server CPU Utilization is high');" } ] } }
{
    "chart": {
        "caption": "Server CPU Utilization",
        "subcaption": " at akme.com",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "valueBelowPivot": "1",
        "tickValueDistance": "15",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "##6baa01 "
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "e44a00"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "id": "crntYr",
                "value": "50",
                "showValue": "1",
                "tooltext": "Current utilization : $value",
                "rearExtension": "15"
            }
        ]
    },
    "alerts": {
        "alert": [
            {
                "minvalue": "70",
                "maxvalue": "100",
                "action": "callJS",
                "param": "showAlert('Current server CPU Utilization is high');"
            }
        ]
    }
}
<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: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Server CPU Utilization",
            "subcaption": " at akme.com",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showValue": "1",
            "valueBelowPivot": "1",
            "tickValueDistance": "15",
            "theme": "fint"
        },
        "colorRange": { // color range to 
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "##6baa01 "
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "e44a00"
            }]
        },
        "dials": {
            "dial": [{
                "id": "crntYr",
                "value": "50",
                "showValue": "1",
                "tooltext": "Current utilization : $value",
                "rearExtension": "15"
            }]
        },
        "alerts": {
            "alert": [{
                // alert range 
                "minvalue": "70",
                "maxvalue": "100",
                // call JavaScript function
                "action": "callJS",
                "param": "showAlert('Current server CPU Utilization is high');"

            }]
        }
    },
    events: {
        "beforeRender": function(evtObj, argObj) {
            var showAlert,
                divElement = document.createElement('div');
            divElement.setAttribute('id', 'alertDiv');
            argObj.container.parentNode.insertBefore(divElement, argObj.container.nextSibling);
        },
        "rendered": function(evtObj, argObj) {
            evtObj.sender.chartInterval = setInterval(function() {
                var angGauge = evtObj.sender,
                    dispCon = document.getElementById("alertDiv");
                //Hiding the table
                dispCon.style.cssText = "display:none";
                prcnt = 0 + parseInt(Math.floor(Math.random() * 100), 10);
                // data to be fed to the gauge
                angGauge.feedData("value=" + prcnt);

            }, 5000); // feed data every 5 seconds
            showAlert = function(msg) {
                var dispCon = document.getElementById("alertDiv"),
                    str = "",
                    tdStyle = "border:1px solid;border-color:#cccccc;width:50%;font-weight: bold;font-size: 14px;padding:    3px;text-align:center",
                    tdStyle2 = "border:1px solid;border-color:#cccccc;width:50%;color:#aa0000;font-weight: bold;font-size: 14px;padding: 3px;text-align:center";

                //Creating the table format
                str += '<table cellpadding="1" width="275px" cellspacing="0">';
                str += '    <tr>';
                str += '        <td style="' + tdStyle2 + '">WARNING !</td>';
                str += '    </tr>';
                str += '    <tr>';
                str += '        <td  style="' + tdStyle + '">' + msg + '</td>';
                str += '    </tr>';
                str += '</table>';
                //Showing the table
                dispCon.style.cssText = "display:block";
                //Adding html string in the div container
                dispCon.innerHTML = str;
            }
        },
        "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 above example shows the server CPU utilization of akme.com. The angular gauge is configured with three color-coded bands to identify levels of utilization of the server. When the CPU utilization is over 70%, an alert is set to display a warning message. The message to be displayed is passed to the showAlert() JavaScript method.

The code snippet to set up the alert manager is as follows:

chart {
    ..
    …….
    "alerts": {
        "alert": [
            {
                // set the threshold range
                "minvalue": "0",
                "maxvalue": "50",
                // action on reaching the threshold range, JavaScript function showAlert()
                "action": "callJS",
                "param": "showAlert('Current server CPU Utilization is low');"
            }
        ]
    }
}

The container element for alert is alerts, which is a child of the chartelement. alert is an array of objects where every object defines a threshold range (alert range). One of the following actions can be specified with any alert range:

  • Call a JavaScript function

  • Show a predefined annotation

Make sure that the alert ranges do not overlap.

An alert object contains the following attributes:

Attribute Name Description

minValue

Minimum value for the alert range. For example, to define an alert for the range 0 - 50, minValue will be 0(inclusive).

maxValue

Maximum value for the alert range. For example, to define an alert for the range 0-50, maxValue will be 50 (inclusive).

action

Action to be taken when the value on the gauge matches an alert range. Possible values for this attribute are:
CALLJS – Calls a JavaScript function that is specified in the param attribute (explained below).
SHOWANNOTATION – Displays an annotation item or a group. The group id of the annotation is specified in param attribute.
Grouping the annotation items is described in detail in the Grouping Annotations article.

param

Parameter for the action, depending on the type of action:
CALLJS - takes the name of JavaScript function and its parameters
SHOWANNOTATION - takes the ID of the annotation items or a .
Due to some security policies, usage of eval has been removed and some of the features of param attribute has been deprecated:

  • Special characters like (, ), - and , cannot be passed as a parameter while function call.
  • Multiple functions cannot be passed after param attribute.
  • A function cannot be defined after param attribute.
Top