| Table of Contents |
|---|
Simple Column Chart
Description: This component will display all the alarms. It can be placed at any level and will sort the alarms by chiller, boiler, vav, and ahu.
How to Make Your Own
- Drag in the AM|Chart from Components in the left menu
- Resize the component to the desired size
- Next create a group
- To do this drag out another component (in this example we used a button) and place it close to the am chart
- Click and drag over the AM|Chart and the other component so that they both are selected
- Right click and select create group
- Next go to Layers in the left menu
- Open up the new group just created
- Right click on the extra component added to create the group (in our example, the button) and delete it
- Then select your group, and add a tag
...
| Code Block |
|---|
var template = this;
var myPoints = [];
finstack.eval('readAll(equip and vav).alarms(today).size').then(function(data) {
var vavPoints = data.result.toObj();
vavPoints.forEach(function(p,index) {
myPoints.push({
curVal : p.val,
navName : "VAV",
"color": "#FF0F00"
});
});
});
finstack.eval('readAll(equip and boiler).alarms(today).size').then(function(data) {
var vavPoints = data.result.toObj();
vavPoints.forEach(function(p,index) {
myPoints.push({
curVal : p.val,
navName : "BOILER",
"color": "#FF9E01"
});
});
});
finstack.eval('readAll(equip and chiller).alarms(today).size').then(function(data) {
var vavPoints = data.result.toObj();
vavPoints.forEach(function(p,index) {
myPoints.push({
curVal : p.val,
navName : "CHILLER",
"color": "#F8FF01"
});
});
});
finstack.eval('readAll(equip and ahu).alarms(today).size').then(function(data) {
var ahuPoints = data.result.toObj();
ahuPoints.forEach(function(p,index) {
myPoints.push({
curVal : p.val,
navName : "AHU",
"color": "#04D215"
});
});
var chart = AmCharts.makeChart( Chart.view, {
"type": "serial",
"theme": "light",
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "ALARMS"
}
],
"dataProvider": myPoints,
"category": "navName",
"value": "curVal",
"valueAxes": [ {
"gridColor": "none",
"gridAlpha": 0.2,
"dashLength": 0
} ],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [ {
"balloonText": "[[navName]] ALARMS: <b>[[curVal]][[unit]]</b>",
"fillColorsField": "color",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "curVal"
} ],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "navName",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition": "start",
"tickLength": 20
},
"export": {
"enabled": true
}
} );
});
|
Stacked Bar Chart
...
Description: This AM|Chart is dynamic, and must be placed on a region. It will display a bar for each site on that region, and show how many alarms from each vav, ahu, boiler, and chiller, on that site.
How to Make Your Own
- Drag in the AM|Chart from Components in the left menu
- Resize the component to the desired size
- Next create a group
- To do this drag out another component (in this example we used a button) and place it close to the am chart
- Click and drag over the AM|Chart and the other component so that they both are selected
- Right click and select create group
- Next go to Layers in the left menu
- Open up the new group just created
- Right click on the extra component added to create the group (in our example, the button) and delete it
- Then select your group, and add a tag
...