Meter Chart

Owned by Sarah Padilla (Unlicensed)
Last updated: Dec 07, 2017
20 min read

This component will show the meters on each site.  The user can select a date or time period to be shown, and can also compare two time periods.

Below is the model the user can upload.

Important

You'll also need to drag out the Am Chart component and hide it. Then you'll also need to add the momentjs file for the chart picker to work. Download it and drop it on the world and thats it.


Model: meterChartDropdown.zip

Momentjs: 

Template

<div class="s-main view-container">
    <div class="s-horizontal">
    <select class="view-container s-dropDown" value={{selected}} on-change="foldUpdate">
        {{#myPoints}}
        <option value={{id}}>{{dis}}</option>
        {{/myPoints}}
    </select>
    <select class="view-container s-dropDown2 s-mnl" value={{selected2}} on-change="foldUpdate">
        {{#myPoints2}}
        <option value={{id}}>{{dis}}</option>
        {{/myPoints2}}
    </select>
    <label class="view-container s-mnl s-date s-vmc" on-click="calendar">{{#if myStart==myEnd}}{{myStart}}{{else}}{{myStart}} to {{myEnd}}{{/if}}</label>
    <label class="s-mnl s-vmc">compared to</label>
    <label class="view-container s-mnl s-date s-vmc" on-click="compare">{{#if myCompareStart==myCompareEnd}}{{myCompareStart}}{{else}}{{myCompareStart}} to {{myCompareEnd}}{{/if}}</label>
    </div>
    <br>
    <div class="s-chart">
        <div id="amChart" class="s-mll" style="width:100%; height:100%;"></div>
    </div>
</div>


Model

{
    data:
    {
        myPoints:[],
        myStart:"Today",
        myEnd:"Today",
        myCompareStart:"None",
        myCompareEnd:"None"
    }
}


Style

.s-dropDown{
    width:150px;
    height:30px;
}
.s-dropDown2{
    width:200px;
    height:30px;
}
.s-chart{
    height:90%;
    width: 100%;
    padding-top: 4px;
}
.s-date:hover{
    background-color: #c9c7c7;
}
.s-date{
    height:30px;
    cursor: pointer;
    border-radius: 4.5px;
}
.s-main{
    width: 100%;
    height: 100%;
}
.s-horizontal{
    display: flex;
	flex-direction: row;
}
.s-vmc{
    display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.s-mnl{
    margin-left: 10px;
}
.s-mll{
    margin-left: 15px;
}


Init

this.ractive.fire("obtainData");
var self    = this;
var template = this;
var model   = self.ractive;
var ractive= this.ractive;
var date = "today()";
var compareDate = null;

model.on('foldUpdate', function(event) {
    var point   = model.get("myPoints");
    var selected   = model.get("selected");
setTimeout(function() {
finstack.eval('readAll(equip and meter and siteRef=='+ selected +')', function(data){
    meter=data.result.toObj();
var newMeter      = [];
    var realPoints  = data.result.toObj();
    realPoints.forEach(function(p,index) {
        newMeter.push({
            dis     : p.dis,
            id      : p.id,
            navName : p.navName
        });
    });
template.newMeter=data.result.toObj();
model.set('myPoints2', template.newMeter);
    var point2   = model.get("myPoints2");
});
setTimeout(function() {
    var selected2   = model.get("selected2");
setTimeout(function() {
finstack.eval('readAll(energy and equipRef=='+ selected2 +' and siteRef=='+ selected +').hisRead('+date+')', function(data){
console.log('readAll(energy and equipRef=='+ selected2 +' and siteRef=='+ selected +').hisRead('+date+')');
queryData=data.result.toObj();
var newPoints      = [];
    var realPoints  = data.result.toObj();
    realPoints.forEach(function(p,index) {
        newPoints.push({
            v0      : p.v0.toFixed(2),
            ts      : p.ts
        });
    });
var test = template.view.querySelector("#amChart");
var chart = AmCharts.makeChart(test, {
 "type": "serial",
  "theme": "light",
    "dataProvider": newPoints,
    "date": "ts",
    "value": "GetPrettyValue(v0)",
  "precision" : 1,
  "marginRight": 40,
  "marginLeft": 40,
  "autoMarginOffset": 20,
  "dataDateFormat": "HH:mm:ss",
  "valueAxes": [ {
    "id": "v1",
    "axisAlpha": 0,
    "position": "left",
    "ignoreAxisWidth": true
  } ],
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0,
  },
  "graphs": [ {
    "id": "g1",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
      "color": "#ffffff",
      "type": "smoothedLine"
    },
    "fillAlphas": 0.2,
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "v0",
    "balloonText": "<span style='font-size:18px;'>[[v0]]</span>"
  } ],
  "chartCursor": {
      "categoryBalloonDateFormat":"MMM DD YYYY JJ:NN:SS",
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 0,
    "zoomable": false,
    "valueZoomable": true,
    "valueLineAlpha": 0.5
  },
  "valueScrollbar": {
    "autoGridCount": true,
    "color": "#000000",
    "scrollbarHeight": 50
  },
  "categoryField": "ts",
  "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
            "dateFormats":[
               {
                  "period":"fff",
                  "format":"L:NN:SS A"
               },
               {
                  "period":"ss",
                  "format":"L:NN:SS A"
               },
               {
                  "period":"mm",
                  "format":"L:NN A"
               },
               {
                  "period":"hh",
                  "format":"L:NN A"
               },
               {
                  "period":"DD",
                  "format":"MMM DD"
               },
               {
                  "period":"WW",
                  "format":"MMM DD"
               },
               {
                  "period":"MM",
                  "format":"MMM"
               },
               {
                  "period":"YYYY",
                  "format":"YYYY"
               }]
  },
  "export": {
    "enabled": true
  },
} );
} );
}, 1000);
}, 200);
}, 200);
            });
            
this.ractive.on("calendar", function(event){
top.app.ShowCalendar(null,function(data)
    {
        var foobag   = model.get("myStart");
        var foo   = model.get("myEnd");
     var start = moment(data.range.start).format("YYYY-MM-DD");
     var end   = moment(data.range.end).format("YYYY-MM-DD");
     var dateStringStart = start;
     var startDate = new moment(dateStringStart).format('MMM DD, YYYY');
     var dateStringEnd = end;
     var endDate = new moment(dateStringEnd).format('MMM DD, YYYY');
    if (start===end){
        date = start;
    }
    else{
        date = (start+'..'+end);
    }
    setTimeout(function() {
        var selected   = model.get("selected");
        var selected2   = model.get("selected2");
finstack.eval('readAll(energy and equipRef=='+ selected2 +' and siteRef=='+ selected +').hisRead('+date+')', function(data){
queryData=data.result.toObj();
var newPoints      = [];
    var realPoints  = data.result.toObj();
    realPoints.forEach(function(p,index) {
        newPoints.push({
            v0      : p.v0.toFixed(2),
            ts      : p.ts
        });
    });
var test = template.view.querySelector("#amChart");
var chart = AmCharts.makeChart(test, {
 "type": "serial",
  "theme": "light",
    "dataProvider": newPoints,
    "date": "ts",
    "value": "GetPrettyValue(v0)",
  "precision" : 1,
  "marginRight": 40,
  "marginLeft": 40,
  "autoMarginOffset": 20,
  "dataDateFormat": "HH:mm:ss",
  "valueAxes": [ {
    "id": "v1",
    "axisAlpha": 0,
    "position": "left",
    "ignoreAxisWidth": true
  } ],
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0,
  },
  "graphs": [ {
    "id": "g1",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
      "color": "#ffffff",
      "type": "smoothedLine"
    },
    "fillAlphas": 0.2,
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "v0",
    "balloonText": "<span style='font-size:18px;'>[[v0]]</span>"
  } ],
  "chartCursor": {
    "categoryBalloonDateFormat":"MMM DD YYYY JJ:NN:SS",
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 0,
    "zoomable": false,
    "valueZoomable": true,
    "valueLineAlpha": 0.5
  },
  "valueScrollbar": {
    "autoGridCount": true,
    "color": "#000000",
    "scrollbarHeight": 50
  },
  "categoryField": "ts",
  "categoryAxis": {
    "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
            "dateFormats":[
               {
                  "period":"fff",
                  "format":"L:NN:SS A"
               },
               {
                  "period":"ss",
                  "format":"L:NN:SS A"
               },
               {
                  "period":"mm",
                  "format":"L:NN A"
               },
               {
                  "period":"hh",
                  "format":"L:NN A"
               },
               {
                  "period":"DD",
                  "format":"MMM DD"
               },
               {
                  "period":"WW",
                  "format":"MMM DD"
               },
               {
                  "period":"MM",
                  "format":"MMM"
               },
               {
                  "period":"YYYY",
                  "format":"YYYY"
               }]
  },
  "export": {
    "enabled": true
  },
} );
} );
}, 1000);
      ractive.set('myStart', startDate);
      ractive.set('myEnd', endDate);
      ractive.set('myCompareStart', "None");
      ractive.set('myCompareEnd', "None");
     },
    {periods:true});
});

this.ractive.on("compare", function(event){
top.app.ShowCalendar(null,function(data)
    {
        var foobag   = model.get("myCompareStart");
        var foo   = model.get("myCompareEnd");
     var start = moment(data.range.start).format("YYYY-MM-DD");
     var end   = moment(data.range.end).format("YYYY-MM-DD");
     var dateStringStart = start;
     var startCompareDate = new moment(dateStringStart).format('MMM DD, YYYY');
     var dateStringEnd = end;
     var endCompareDate = new moment(dateStringEnd).format('MMM DD, YYYY');
    if (start===end){
        compareDate = start;
    }
    else{
        compareDate = (start+'..'+end);
    }
    setTimeout(function() {
        var selected   = model.get("selected");
        var selected2   = model.get("selected2");
finstack.eval('readAll(energy and equipRef=='+ selected2 +' and siteRef=='+ selected +').finHisReadBaseline('+date+','+compareDate+')[0]', function(data){
queryData=data.result.toObj();
var newPoints      = [];
    var realPoints  = data.result.toObj();
    realPoints.forEach(function(p,index) {
        newPoints.push({
            v0      : p.v0.toFixed(2),
            v0base  : p.v0base.toFixed(2),
            ts      : p.ts
        });
    });
var test = template.view.querySelector("#amChart");
var chart = AmCharts.makeChart(test, {
 "type": "serial",
  "theme": "light",
    "dataProvider": newPoints,
    "date": "ts",
    "value1": "v0",
    "value2": "v0base",
  "precision" : 1,
  "marginRight": 40,
  "marginLeft": 40,
  "autoMarginOffset": 20,
  "dataDateFormat": "HH:mm:ss",
  "valueAxes": [ {
    "id": "v1",
    "axisAlpha": 0,
    "position": "left",
    "ignoreAxisWidth": true
  } ],
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0,
  },
  "graphs": [ {
    "id": "g1",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
      "color": "#ffffff",
      "type": "smoothedLine"
    },
    "fillAlphas": 0.2,
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "v0",
    "balloonText": "<span style='font-size:18px;'>[[v0]]</span>"
  },
  {
    "id": "g2",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
      "color": "#ffffff",
      "type": "smoothedLine"
    },
    "fillAlphas": 0,
    "lineColor": "#da616b",
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "dashLength":5,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "v0base",
    "balloonText": "<span style='font-size:18px;'>[[v0base]]</span>"
  }],
  "chartCursor": {
      "categoryBalloonDateFormat":"MMM DD YYYY JJ:NN:SS",
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 0,
    "zoomable": false,
    "valueZoomable": true,
    "valueLineAlpha": 0.5
  },
  "valueScrollbar": {
    "autoGridCount": true,
    "color": "#000000",
    "scrollbarHeight": 50
  },
  "categoryField": "ts",
  "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
            "dateFormats":[
               {
                  "period":"fff",
                  "format":"L:NN:SS A"
               },
               {
                  "period":"ss",
                  "format":"L:NN:SS A"
               },
               {
                  "period":"mm",
                  "format":"L:NN A"
               },
               {
                  "period":"hh",
                  "format":"L:NN A"
               },
               {
                  "period":"DD",
                  "format":"MMM DD"
               },
               {
                  "period":"WW",
                  "format":"MMM DD"
               },
               {
                  "period":"MM",
                  "format":"MMM"
               },
               {
                  "period":"YYYY",
                  "format":"YYYY"
               }]
  },
  "export": {
    "enabled": true
  },
} );
} );
}, 1000);
      ractive.set('myCompareStart', startCompareDate);
      ractive.set('myCompareEnd', endCompareDate);
     },
    {periods:true});
});


Program

var template = this;
var myTarget = query('targetPoint');
var dropdown;
var dropdown2;
finstack.eval('readAll(site)', function(data){
template.myPoints=data.result.toObj();
dropdown = template.myPoints;
});
setTimeout(function() {
finstack.eval('readAll(equip and meter and siteRef=='+ dropdown[0].id +')', function(data){
template.myPoints2=data.result.toObj();
dropdown2 = template.myPoints2;
});
setTimeout(function() {
var queryData = query("stackRactive");
finstack.eval('readAll(energy and equipRef=='+ dropdown2[0].id +' and siteRef=='+ dropdown[0].id +').hisRead(today)', function(data){
queryData=data.result.toObj();
var newPoints      = [];
    var realPoints  = data.result.toObj();
    realPoints.forEach(function(p,index) {
        newPoints.push({
            v0      : p.v0.toFixed(2),
            ts      : p.ts
        });
    });
var test = template.view.querySelector("#amChart");
var chart = AmCharts.makeChart(test, {
 "type": "serial",
  "theme": "light",
    "dataProvider": newPoints,
    "date": "ts",
    "value": "v0",
  "marginRight": 40,
  "marginLeft": 40,
  "autoMarginOffset": 20,
  "valueAxes": [ {
    "id": "v1",
    "axisAlpha": 0,
    "position": "left",
    "ignoreAxisWidth": true
  } ],
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0,
  },
  "graphs": [ {
      "precision": 1,
    "id": "g1",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
      "color": "#ffffff",
      "type": "smoothedLine"
    },
    "fillAlphas": 0.2,
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "v0",
    "balloonText": "<span style='font-size:18px;'>[[v0]]</span>"
  } ],
  "chartCursor": {
      "categoryBalloonDateFormat":"MMM DD YYYY JJ:NN ",
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 0,
    "zoomable": false,
    "valueZoomable": true,
    "valueLineAlpha": 0.5
  },
  "valueScrollbar": {
    "autoGridCount": true,
    "color": "#000000",
    "scrollbarHeight": 50
  },
  "categoryField": "ts",
  "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
    "minPeriod": "mm",
            "dateFormats":[
              {
                  "period":"fff",
                  "format":"L:NN:SS A"
              },
              {
                  "period":"ss",
                  "format":"L:NN:SS A"
              },
              {
                  "period":"mm",
                  "format":"L:NN A"
              },
              {
                  "period":"hh",
                  "format":"L:NN A"
              },
              {
                  "period":"DD",
                  "format":"MMM DD"
              },
              {
                  "period":"WW",
                  "format":"MMM DD"
              },
              {
                  "period":"MM",
                  "format":"MMM"
              },
              {
                  "period":"YYYY",
                  "format":"YYYY"
              }]
  },
  "export": {
    "enabled": true
  },
} );
} );
}, 200);
}, 200);

Go to programs and add a new program

  • Name your program, and set the program target filter to stackRactive
  • Copy and paste the above code for program into the main part
  • Top right of program editor, click the three dots, and select variables
  • Click the gear that appears as you hover over this
  • Turn Invokes the Function on and change the dropdown to Custom Event
  • Type in obtainData in the line below and click the gray save
  • Save and your done