FIN Framework > Meter Chart > 2017-07-26_13-41-57.gif

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.

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

FIN Framework > Meter Chart > Screen Shot 2017-07-26 at 1.56.40 PM.png

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