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.
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:
{
"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');"
}
]
}
}<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({
type: 'angulargauge',
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Server CPU Utilization",
"subcaption": " at akme.com",
"lowerLimit": "0",
"upperLimit": "100",
"showValue": "1",
"valueBelowPivot": "1",
"tickValueDistance": "15",
"theme": "fint"
},
"colorRange": { // color range to
"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": [{
// alert range
"minvalue": "70",
"maxvalue": "100",
// call JavaScript function
"action": "callJS",
"param": "showAlert('Current server CPU Utilization is high');"
}]
}
},
events: {
"beforeRender": function(evtObj, argObj) {
var showAlert,
divElement = document.createElement('div');
divElement.setAttribute('id', 'alertDiv');
argObj.container.parentNode.insertBefore(divElement, argObj.container.nextSibling);
},
"rendered": function(evtObj, argObj) {
evtObj.sender.chartInterval = setInterval(function() {
var angGauge = evtObj.sender,
dispCon = document.getElementById("alertDiv");
//Hiding the table
dispCon.style.cssText = "display:none";
prcnt = 0 + parseInt(Math.floor(Math.random() * 100), 10);
// data to be fed to the gauge
angGauge.feedData("value=" + prcnt);
}, 5000); // feed data every 5 seconds
showAlert = function(msg) {
var dispCon = document.getElementById("alertDiv"),
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 + '">WARNING !</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;
}
},
"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 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
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, |
|
Maximum value for the alert range. For example, to define an alert for the range 0-50, |
|
Action to be taken when the value on the gauge matches an alert range. Possible values for this attribute are: |
|
Parameter for the action, depending on the type of action:
|