/
AM Alarms

AM Alarms

Owned by Sarah Padilla (Unlicensed)
Last updated: Nov 16, 2017



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

  • 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",
  "titles": [
        {
            "id": "Title-1",
            "size": 15,
            "text": "ALARMS BY EQUIP TYPE"
        }
    ],
  "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

  • 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();
                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();
                chillerNum = 0;
                newCHILLERPOINTS.forEach(function(p,index) {
                    chillerNum += p.val;
                });
            });
            finstack.eval('readAll(siteRef=='+p.id+' and equip and boiler).alarms(today).size').then(function(data) {
                var newBOILERPOINTS  = data.result.toObj();
                boilerNum = 0;
                newBOILERPOINTS.forEach(function(p,index) {
                    boilerNum += p.val;
                });
                 dataTEST.push({
                navName : p.dis,
                Vav : vavNum,
                Ahu : ahuNum,
                Boiler : boilerNum,
                Chiller : chillerNum
            });
                
            });
        });
    });
         
    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]] Alarms</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]] Alarms</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]] Alarms</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]] Alarms</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
     }
});



Related content

Simple Column Chart
Simple Column Chart
FIN Framework
More like this
FIN Chart Components (finAmChartsReactExt)
FIN Chart Components (finAmChartsReactExt)
FIN Framework
Read with this
AM Charts for Ractive Dashboard
AM Charts for Ractive Dashboard
FIN Framework
More like this
GB FIN Model
GB FIN Model
FIN Framework
Read with this
History Chart Box
History Chart Box
FIN Framework
More like this
Dynamic Chart
Dynamic Chart
FIN Framework
Read with this