Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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

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

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..
{ "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');"
            }
        ]
    }
}
<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({
    id: "mychart",
    type: 'realtimecolumn',
    renderAt: 'chart-container',
    width: '600',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "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');"
            }]
        }
    },
    events: {
        'beforeRender': function(evt, args) {
            var controllers = document.createElement('div');
            controllers.setAttribute('id', 'tableView');
            controllers.style.cssText = "";
            //Display container div and write table
            args.container.parentNode.insertBefore(controllers, args.container.nextSibling);
        },
        'rendered': function(evt, args) {
            window.showAlert = function(msg) {
                var dispCon = document.getElementById("tableView"),
                    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 + '">ALERT</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;
            }
            //Format minutes, seconds by adding 0 prefix accordingly
            function formatTime(time) {
                (time < 10) ? (time = "0" + time) : (time = time);
                return time;
            }
            evt.sender.chartInterval = setInterval(function() {

                //Get reference to the chart using its ID
                var chartRef = evt.sender,
                    dispCon = document.getElementById("tableView");
                //Hiding the table
                dispCon.style.cssText = "display:none";
                //We need to create a querystring format incremental update, containing
                //label in hh:mm:ss format
                //and a value (random).
                var currDate = new Date();
                var label = formatTime(currDate.getHours()) + ":" + formatTime(currDate.getMinutes()) + ":" + formatTime(currDate.getSeconds());
                //Get random number between 5 & 20 - rounded
                var footfall = Math.round(Math.random() * 15) + 5;
                var strData = "&label=" + label + "&value=" + footfall;

                //Feed it to chart.
                chartRef.feedData(strData);

            }, 5000);
        },
        '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 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');"

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 and for the SHOWANNOTATION action, it takes the ID of the annotation group in order to show the annotation.
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.

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"
        }]
    }]
}
Top