Versions Compared

Old Version 3

changes.mady.by.user Sarah Padilla (Unlicensed)

Saved on

compared with

New Version 4

changes.mady.by.user Sarah Padilla (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Image RemovedImage Removed

Simple Column Chart

Image RemovedImage AddedImage Added


Description: These are two different AM|Charts to display alarms.  They both use the similar queries (shown below).  The simple column chart can be placed anywhere and will display all the alarms.  The stacked bar chart must be placed on a region and is dynamic, showing all the alarms on each site of that region.

readAll(equip and vav).alarms(today).size

readAll(equip and ahu).alarms(today).size

readAll(equip and boiler).alarms(today).size

readAll(equip and chiller).alarms(today).size

Simple Column Chart

Image Added

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.

  • 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",
  "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

Image RemovedImage Added

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.

...

Code Block
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();
                vavNum = 0;
                newVAVPOINTS.forEach(function(p,index) {
                    vavNum += p.val;
                });
            });
            finstack.eval('readAll(siteRef=='+p.id+' and equip and ahu).alarms(today).size').then(function(data) {
                var newAHUPOINTS  = data.result.toObj()();
                ahuNum = 0;
                newAHUPOINTS.forEach(function(p,index) {
                    ahuNum += p.val;
                });
            });
            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,indexdata) {
                var   newCHILLERPOINTS chillerNum += p.valdata.result.toObj();
                });chillerNum             })= 0;
            finstack.eval('readAll(siteRef=='+p.id+' and equip and boiler).alarms(today).size').then newCHILLERPOINTS.forEach(function(datap,index) {
                  var newBOILERPOINTS chillerNum += data.result.toObj()p.val;
                newBOILERPOINTS.forEach(function(p,index) {});
            });
           boilerNum += p.val;
         finstack.eval('readAll(siteRef=='+p.id+' and equip and boiler).alarms(today).size').then(function(data) {
       });         var newBOILERPOINTS   }= data.result.toObj();
  
         setTimeout(function(){       boilerNum = 0;
   dataTEST.push({               newBOILERPOINTS.forEach(function(p,index) {
 navName : p.dis,                 VavboilerNum : vavNum,+= p.val;
                Ahu});
: ahuNum,                dataTEST.push({
Boiler : boilerNum,              navName : p.dis,
Chiller : chillerNum             }); Vav : vavNum,
                Ahu : ahuNum,
   vavNum = 0;           Boiler : ahuNumboilerNum,
= 0;             boilerNum = 0;Chiller : chillerNum
          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,
		: 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
     }
});