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
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:
{
"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 |
|---|---|
|
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 |
|
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. |
|
This attribute defines the action to be taken, when the chart value matches an alert range. Possible values for this attribute are: |
|
It accepts the parameter for an action, depending on the type of action specified using the
|
|
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 |
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 |
|---|---|
|
It is used to specify whether the values of a dataset will be checked for alerts. Setting this attribute to |