Simple Column Chart
- 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
- Go to Programs in the left menu
- Click the + icon to add a new program
- In Program Target Filter type the name of the tag placed on the group in the previous steps
- Copy and paste the code below into the main part and save!
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",
"dataProvider": myPoints,
"category": "navName",
"value": "curVal",
"valueAxes": [ {
"gridColor": "none",
"gridAlpha": 0.2,
"dashLength": 0
} ],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [ {
"balloonText": "[[navName]]: <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.
- 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
- Go to Programs in the left menu
- Click the + icon to add a new program
- In Program Target Filter type the name of the tag placed on the group in the previous steps
- Copy and paste the code below into the main part and save!
var template = this;
var dataTEST = [];
var mySites;
var vavNum = 0;
var ahuNum = 0;
var boilerNum = 0;
var chillerNum = 0;
var myTest = query('targetPoint');
console.log(myTest.pointId);
var myTarget = myTest.pointId;
finstack.eval('readAll(site and regionRef=='+ myTarget+')').then(function(data) {
mySites = data.result.toObj();
mySites.forEach(function(p,index) {
finstack.eval('readAll(siteRef=='+p.id+' and equip and vav).alarms(today).size').then(function(data) {
var newVAVPOINTS = data.result.toObj();
newVAVPOINTS.forEach(function(p,index) {
vavNum += p.val;
console.log(vavNum);
});
});
finstack.eval('readAll(siteRef=='+p.id+' and equip and ahu).alarms(today).size').then(function(data) {
var newAHUPOINTS = data.result.toObj();
newAHUPOINTS.forEach(function(p,index) {
ahuNum += p.val;
console.log(ahuNum);
});
});
finstack.eval('readAll(siteRef=='+p.id+' and equip and chiller).alarms(today).size').then(function(data) {
var newCHILLERPOINTS = data.result.toObj();
newCHILLERPOINTS.forEach(function(p,index) {
chillerNum += p.val;
console.log(chillerNum);
});
});
finstack.eval('readAll(siteRef=='+p.id+' and equip and boiler).alarms(today).size').then(function(data) {
var newBOILERPOINTS = data.result.toObj();
newBOILERPOINTS.forEach(function(p,index) {
boilerNum += p.val;
console.log(boilerNum);
});
});
setTimeout(function(){
dataTEST.push({
navName : p.dis,
Vav : vavNum,
Ahu : ahuNum,
Boiler : boilerNum,
Chiller : chillerNum
});
vavNum = 0;
ahuNum = 0;
boilerNum = 0;
chillerNum = 0;
}, 100);
});
});
console.log('dataTEST', dataTEST);
var chart = AmCharts.makeChart(Chart.view, {
"type": "serial",
"theme": "light",
"legend": {
"horizontalGap": 10,
"maxColumns": 1,
"position": "right",
"useGraphSettings": true,
"markerSize": 10
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": myTest.dis
}
],
"dataProvider": dataTEST,
"valueAxes": [{
"stackType": "regular",
"axisAlpha": 0.5,
"gridAlpha": 0
}],
"graphs": [{
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Vav",
"type": "column",
"color": "#000000",
"valueField": "Vav"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Ahu",
"type": "column",
"color": "#000000",
"valueField": "Ahu"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Boiler",
"type": "column",
"color": "#000000",
"valueField": "Boiler"
}, {
"balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
"fillAlphas": 0.8,
"labelText": "[[value]]",
"lineAlpha": 0.3,
"title": "Chiller",
"type": "column",
"color": "#000000",
"valueField": "Chiller"
}],
"rotate": true,
"categoryField": "navName",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left"
},
"export": {
"enabled": true
}
});