Setting Alert Manager

The alert manager helps you define thresholds for data values and perform specific actions for the defined thresholds. For example, if you are plotting a real-time temperature chart and wish to play a sound when the temperature reaches between 90 and 100 Fahrenheit, you can do this using the alert manager.

As long as they don’t overlap, you can define any number of threshold ranges. For each threshold range, you can specify one of the following actions:

Call a JavaScript function and pass parameters to it
Show a predefined annotation on the chart
Play a MP3 sound, which is dynamically loaded

In this section, you will be shown how you can:

Configure the alert manager for all datasets on the chart
Configure the alert manager for individual datasets

Configuring the Alert Manager for all Datasets

A real-time chart, in which the alert manager is configured to call a JavaScript function, looks like this:

FusionCharts will load here..

The data structure needed to configure the alert manager to call the JavaScript function is given below:

JSON
XML

{ "chart": { "caption": "Harry's Supermart - Bakersfield Central", "subCaption": "Footfalls", "showrealtimevalue": "1", "borderAlpha": "0", "yaxismaxvalue": "40", "numdisplaysets": "10", "usePlotGradientColor": "0", "canvasBorderAlpha": "20", "labeldisplay": "rotate", "slantLabels": "1", "showLegend": "0", "plotBorderAlpha": "0", "bgAlpha": "0", "showValues": "0", "numbersuffix": " Customers", "showlabels": "1", "animation": "0", "showRealTimeValue": "0" }, "categories": [ { "category": [ { "label": "8 mins ago" }, { "label": "7 mins ago" }, { "label": "6 mins ago" }, { "label": "5 mins ago" }, { "label": "4 mins ago" }, { "label": "3 mins ago" }, { "label": "2 mins ago" }, { "label": "1 min ago" } ] } ], "dataset": [ { "seriesname": "Footfall", "alpha": "100", "data": [ { "value": "5" }, { "value": "17" }, { "value": "10" }, { "value": "15" }, { "value": "5" }, { "value": "12" }, { "value": "8" }, { "value": "10" } ] } ], "alerts": { "alert": [ { "minvalue": "10", "maxvalue": "20", "action": "callJS", "param": "showAlert('Footfall exceeded average');" } ] } }

{
    "chart": {
        "caption": "Harry's Supermart - Bakersfield Central",
        "subCaption": "Footfalls",
        "showrealtimevalue": "1",
        "borderAlpha": "0",
        "yaxismaxvalue": "40",
        "numdisplaysets": "10",
        "usePlotGradientColor": "0",
        "canvasBorderAlpha": "20",
        "labeldisplay": "rotate",
        "slantLabels": "1",
        "showLegend": "0",
        "plotBorderAlpha": "0",
        "bgAlpha": "0",
        "showValues": "0",
        "numbersuffix": " Customers",
        "showlabels": "1",
        "animation": "0",
        "showRealTimeValue": "0"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "8 mins ago"
                },
                {
                    "label": "7 mins ago"
                },
                {
                    "label": "6 mins ago"
                },
                {
                    "label": "5 mins ago"
                },
                {
                    "label": "4 mins ago"
                },
                {
                    "label": "3 mins ago"
                },
                {
                    "label": "2 mins ago"
                },
                {
                    "label": "1 min ago"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Footfall",
            "alpha": "100",
            "data": [
                {
                    "value": "5"
                },
                {
                    "value": "17"
                },
                {
                    "value": "10"
                },
                {
                    "value": "15"
                },
                {
                    "value": "5"
                },
                {
                    "value": "12"
                },
                {
                    "value": "8"
                },
                {
                    "value": "10"
                }
            ]
        }
    ],
    "alerts": {
        "alert": [
            {
                "minvalue": "10",
                "maxvalue": "20",
                "action": "callJS",
                "param": "showAlert('Footfall exceeded average');"
            }
        ]
    }
}

The container object for alerts is alerts property, which is a child of the datasource object.

Now, for each alert range object , you need to define an alert array element as a child of the alerts object. The alert array elements can have the following attributes:

Attribute Name	Description
`minValue`	It is used to specify the minimum value for a threshold range. For example, to define an alert for the range 5-8, 5 is the minimum value. When real-time values are matched against the value for `minValue`, the value is inclusive. For example, if 5 is the minimum value and also the real-time value, actions defined for the range 5-8, using the alert manager, will be executed.
`maxValue`	It is used to specify the maximum value for a threshold range. For example, to define an alert for the range 5-8, 8 is the maximum value. Like the minimum value, the maximum value is also inclusive during value checks.
`action`	This attribute defines the action to be taken, when the chart value matches an alert range. Possible values for this attribute are: `CALLJS` – It calls a JavaScript function (specified using the `param` attribute – explained next) when the chart value matches against an alert range. To pass parameters to the JavaScript function, specify the exact function name and parameters in the `param` attribute – for example, `"param": "showAlert('Online Transaction above average');"` `PLAYSOUND` – It plays a MP3 sound (located relative to the chart), when an alert range matches. The relative URL of the MP3 sound should be declared using the `param` attribute. `SHOWANNOTATION` – You can create custom annotations and annotation groups (with named IDs). This action lets you show a predefined annotation group in the chart. For example, you may define an annotation group of three circles, that represent three status indicators in the colors red, green, and yellow, and assign an annotation group ID for them. By default, you may hide all status indicators. Later, based on the chart’s value, you may show an annotation. The group Id of the annotation to be shown is defined using the `param` attribute. When the chart value falls out of the that alert range, the chart hides the annotation.
`param`	It accepts the parameter for an action, depending on the type of action specified using the `action` attribute. For the `CALLJS` action, it takes the name of the JavaScript function. For the `PLAYSOUND` action, it takes the relative path of the MP3 file, and for the `SHOWANNOTATION` action, it takes the ID of the annotation group in order to show the annotation.
`occurOnce`	It specifies whether an alert threshold range will be executed only once. Often, you might need an alert threshold range to act only once, irrespective of how many times the value goes into the range. Setting this attribute to `1` will notify the alert manager only the first time a value falls into that range. For example, for a temperature range 70-80 Fahrenheit , if you want to be notified only once when the temperature is 75, set the `occurOnce` attribute to `1` for this range.

Configuring the Alert Manager for Individual Datasets

In real-time charts, you can control the datasets that are checked by the alert manager to raise any events.

For example, if you are comparing the transactions of a Retail Store and an Online Store using a single real-time column chart, you may want alerts to be defined and raised only for the Online Store. In this case, you can disable the alerts for the Retail Store’s dataset.

Given below is a brief description of the attribute used to configure the alert manager for individual datasets:

Attribute Name	Description
`checkForAlerts`	It is used to specify whether the values of a dataset will be checked for alerts. Setting this attribute to `0` disables the check for that dataset, setting it to `1` (default) enables it.

{
    "dataset": [{
        "seriesname": "Retail Store",
        "checkForAlerts": "0",
        "alpha": "100",
        "data": [{
            "value": "15"
        }]
    }, {
        "seriesname": "Online",
        "alpha": "100",
        "data": [{
            "value": "2"
        }]
    }]
}

There! You have now seen how you can configure alerts for real-time charts.