Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts


Integrating With Your Stack



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]tutorials/advanced-charting/real-time-gauges/

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..

The above example shows the server CPU utilization of 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

  • Play a dynamically loaded MP3 sound

Make sure that the alert ranges do not overlap.

An alert object contains the following attributes:

Attribute Name Description


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


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


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).
PLAYSOUND – Plays an MP3 sound (located relative to the chart location). The relative URL of the MP3 file should be declared in the param attribute.
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]tutorials/annotations/ article.


Parameter for the action, depending on the type of action:
CALLJS - takes the name of JavaScript function and its parameters
PLAYSOUND - takes the relative path of MP3 file
SHOWANNOTATION - takes the ID of the annotation items or a group

The data structure to set the alert manager is shown below:

{ "chart": { "caption": "Server CPU Utilization", "subcaption": " at", "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",
        "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');"