Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

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;
                });
            });
            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;
                });
            });
            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;
                });
            });
            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;
                });
            });
            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
     }
});



  • No labels