Setting the Alert Manager

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/setting-up-real-time-gauges.md.

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 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
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
`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). `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/grouping-annotations.md article.
`param`	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:

JSON
XML

{ "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');"
            }
        ]
    }
}