Energy Dashboard

Owned by Sarah Padilla (Unlicensed)
Last updated: Jul 13, 2018
35 min read

Create Your Own

This dashboard is made up of 6 different Ractive components.  I set my background to 1280X1050.

Ractive

  • Drag out Ractive from components on the left side menu
  • Under Properties, click Ractive editor, then open editor
  • Copy and paste the code below for template, model, style, and init, into the corresponding tabs for each component

Tagging

  • Click the tag icon and type in the name of the tag to apply it on your component

Program

  • Go to programs in the left menu
  • Click the plus to add a new program, and it will pull up the program editor
  • In the Program Target Filter type the name of the tag applied to the correcponding Ractive model
  • Click the three dots in the top right corner, and select variables
  • Click the gear that appears as you haver over "this"
  • Turn on Invokes the Function
  • Change the dropdown to Custom Event
  • In the textbox below the dropdown type obtainData
  • Click the gray Save button
  • Copy and paste the code below into the main section and click the blue save

Compare Cost of Kw per Sqft.

Template

<div class="s-box">
 <span class="titleText">Compare Cost of Kwh per Sqft.</span>
  <div style="width:100%;">
    <center>
        <div class="s-bar" style="background-color:none;"><b>Compare:</b>
            <div class="dropDownDiv">
                <select class="drop" value={{selected}} on-change="foldUpdate">
                    <option>Select...</option>
                        {{#myPoints}}
                            <option value="{{siteRef}}">{{dis}}</option>
                        {{/myPoints}}
                </select>
            </div>
            <div class="dropDownDiv">
                <select class="drop" value={{selected2}} on-change="foldUpdate2">
                    <option>Select...</option>
                        {{#myPoints}}
                            <option value="{{siteRef}}">{{dis}}</option>
                        {{/myPoints}}
                </select>
            </div>
        </div>
        <div class="s-bar3" style="background-color:#6cc487; color:#fff;"><b>Current:</b>
            <div class="whiteBox">{{#curentData}}${{curentData.toFixed(2)}}{{/curentData}}</div>
            <div class="whiteBox">{{#curentData2}}${{curentData2.toFixed(2)}}{{/curentData2}}</div>
        </div>
        <div class="s-bar3" style="background-color:#8c68b2; color:#fff;"><b>Last:</b>
            <div class="whiteBox">{{#lastData}}${{lastData.toFixed(2)}}{{/lastData}}</div>
            <div class="whiteBox">{{#lastData2}}${{lastData2.toFixed(2)}}{{/lastData2}}</div>
        </div>
        <div class="buttonBar">
            <div class="s-button selected" id="day" on-click="day">Day</div>
            <div class="s-button" id="week" on-click="week">Week</div>
            <div class="s-button" id="month" on-click="month">Month</div>
            <div class="s-button" id="year" on-click="year">Year</div>
        </div>
    </center>
   </div>
</div>


Model

{
    data:
    {
        myPoints:[],
        curentData:[],
        lastData:[],
        curentData2:[],
        lastData2:[]
    }
}

Style

.titleText{
    font-weight: bold;
    font-size: 20px;
}
.s-box{
    padding: 10px;
    background-color: #fafafa;
    border-radius: 5px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.selected{
    background-color: #7093c1;
}
.drop{
    width:100%;
    height: 30px;
    margin-top: 5px;
}
.s-bar3{
    margin-top:15px;
    height:50px;
    width:100%;
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex-grow:1;
	justify-content: flex-end;
	align-items: center;
	border-radius: 5px;
}
.s-bar{
    margin-top:15px;
    height:50px;
    width:100%;
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex-grow:1;
	justify-content: flex-end;
	align-items: center;
	border-radius: 5px;
}
.whiteBox{
    width: 40%;
    height: 40px;
    margin-right: 5px;
    margin-left: 5px;
    border-radius: 5px;
    background-color: #fefefe;
    color: #000;
    font-size: 18px;
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.dropDownDiv{
        width: 40%;
    height: 30px;
    margin-right: 5px;
    margin-left: 5px;
    border-radius: 5px;
    color: #000;
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.buttonBar{
    width:100%;
    height:40px;
    margin-top:15px;
    border-radius: 5px;
    background-color: #4f7ab3;
    display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.s-button{
    color:#fff;
    border-radius: 5px;
    width:100%;
    height: 100%;
    font-weight: bold;
    padding: 10px 15px 10px 15px;
    display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

Init

this.ractive.fire("obtainData");
var template = this;
var model = this.ractive;
var myTarget = model.queryAll('targetPoint');
var datePick = "today";
var datePick2 = "yesterday";

model.on('foldUpdate', function(event) {
var point   = model.get("curentData");
var points   = model.get("lastData");
    var selected   = model.get("selected");
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected+').hisRead('+datePick+').hisRollup(sum,1hr).hisClip.first', function(data){
    var firstCurrentPoint = data.result.toObj();

finstack.eval('readAll(siteRef=='+selected+' and energyCost)', function(data){
    var costPrice1 = data.result.toObj()[0].curVal;
    var curentData = (firstCurrentPoint[0].v0 * costPrice1);
    model.set('curentData', curentData);
});
});
}, 200);
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected+').hisRead('+datePick2+').hisRollup(sum,1hr).hisClip.first', function(data){
    var firstLastPoint = data.result.toObj();
    
    finstack.eval('readAll(siteRef=='+selected+' and energyCost)', function(data){
    var costPrice2 = data.result.toObj()[0].curVal;
    var lastData = (firstLastPoint[0].v0 * costPrice2);
    model.set('lastData', lastData);
});
});
}, 200);
});

model.on('foldUpdate2', function(event) {
var point2   = model.get("curentData2");
var point3   = model.get("lastData2");
    var selected2   = model.get("selected2");
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected2+').hisRead('+datePick+').hisRollup(sum,1hr).hisClip.first', function(data){
    var firstCurrentPoint2 = data.result.toObj();

    finstack.eval('readAll(siteRef=='+selected2+' and energyCost)', function(data){
    var costPrice3 = data.result.toObj()[0].curVal;
    var curentData2 = (firstCurrentPoint2[0].v0 * costPrice3);
    model.set('curentData2', curentData2);
});

});
}, 200);
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected2+').hisRead('+datePick2+').hisRollup(sum,1hr).hisClip.first', function(data){
    var firstLastPoint2 = data.result.toObj();

    finstack.eval('readAll(siteRef=='+selected2+' and energyCost)', function(data){
    var costPrice4 = data.result.toObj()[0].curVal;
    var lastData2 = (firstLastPoint2[0].v0 * costPrice4);
    model.set('lastData2', lastData2);
});
});
}, 200);
});


this.ractive.on("day", function(event) {
    var showItem = model.queryAll('stackRactive');
    showItem.forEach(function(item){
    var dayID = template.view.querySelector("#day");
    var weekID = template.view.querySelector("#week");
    var monthID = template.view.querySelector("#month");
    var yearID = template.view.querySelector("#year");
    dayID.style.backgroundColor = "#7093c1";
    weekID.style.backgroundColor = "#4f7ab3";
    monthID.style.backgroundColor = "#4f7ab3";
    yearID.style.backgroundColor = "#4f7ab3";
  });
    datePick = "today";
    datePick2 = "yesterday";
    var point   = model.get("curentData");
    var selected   = model.get("selected");
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected+').hisRead('+datePick+').hisRollup(sum,1hr).hisClip.first', function(data){
    var firstCurrentPoint = data.result.toObj();

finstack.eval('readAll(siteRef=='+selected+' and energyCost)', function(data){
    var costPrice1 = data.result.toObj()[0].curVal;
    var curentData = (firstCurrentPoint[0].v0 * costPrice1);
    model.set('curentData', curentData);
});
});
}, 200);
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected+').hisRead('+datePick2+').hisRollup(sum,1hr).hisClip.first', function(data){
    var firstLastPoint = data.result.toObj();
    
    finstack.eval('readAll(siteRef=='+selected+' and energyCost)', function(data){
    var costPrice2 = data.result.toObj()[0].curVal;
    var lastData = (firstLastPoint[0].v0 * costPrice2);
    model.set('lastData', lastData);
});
});
}, 200);
    var point2   = model.get("curentData2");
    var selected2   = model.get("selected2");
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected2+').hisRead('+datePick+').hisRollup(sum,1hr).hisClip.first', function(data){
    var firstCurrentPoint2 = data.result.toObj();

    finstack.eval('readAll(siteRef=='+selected2+' and energyCost)', function(data){
    var costPrice3 = data.result.toObj()[0].curVal;
    var curentData2 = (firstCurrentPoint2[0].v0 * costPrice3);
    model.set('curentData2', curentData2);
});
});
}, 200);
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected2+').hisRead('+datePick2+').hisRollup(sum,1hr).hisClip.first', function(data){
    var firstLastPoint2 = data.result.toObj();

    finstack.eval('readAll(siteRef=='+selected2+' and energyCost)', function(data){
    var costPrice4 = data.result.toObj()[0].curVal;
    var lastData2 = (firstLastPoint2[0].v0 * costPrice4);
    model.set('lastData2', lastData2);
});
});
}, 200);
});

this.ractive.on("week", function(event) {
    var showItem = model.queryAll('stackRactive');
    showItem.forEach(function(item){
    var dayID = template.view.querySelector("#day");
    var weekID = template.view.querySelector("#week");
    var monthID = template.view.querySelector("#month");
    var yearID = template.view.querySelector("#year");
    weekID.style.backgroundColor = "#7093c1";
    dayID.style.backgroundColor = "#4f7ab3";
    monthID.style.backgroundColor = "#4f7ab3";
    yearID.style.backgroundColor = "#4f7ab3";
  });
    datePick = "thisWeek";
    datePick2 = "lastWeek";
    var point   = model.get("curentData");
    var selected   = model.get("selected");
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected+').hisRead('+datePick+').hisRollup(sum,1hr).hisClip.first', function(data){
    var firstCurrentPoint = data.result.toObj();

finstack.eval('readAll(siteRef=='+selected+' and energyCost)', function(data){
    var costPrice1 = data.result.toObj()[0].curVal;
    var curentData = (firstCurrentPoint[0].v0 * costPrice1);
    model.set('curentData', curentData);
});
});
}, 200);
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected+').hisRead('+datePick2+').hisRollup(sum,1hr).hisClip.first', function(data){
    var firstLastPoint = data.result.toObj();
    
    finstack.eval('readAll(siteRef=='+selected+' and energyCost)', function(data){
    var costPrice2 = data.result.toObj()[0].curVal;
    var lastData = (firstLastPoint[0].v0 * costPrice2);
    model.set('lastData', lastData);
});
});
}, 200);
    var point2   = model.get("curentData2");
    var selected2   = model.get("selected2");
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected2+').hisRead('+datePick+').hisRollup(sum,1hr).hisClip.first', function(data){
    var firstCurrentPoint2 = data.result.toObj();

    finstack.eval('readAll(siteRef=='+selected2+' and energyCost)', function(data){
    var costPrice3 = data.result.toObj()[0].curVal;
    var curentData2 = (firstCurrentPoint2[0].v0 * costPrice3);
    model.set('curentData2', curentData2);
});
});
}, 200);
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected2+').hisRead('+datePick2+').hisRollup(sum,1hr).hisClip.first', function(data){
    var firstLastPoint2 = data.result.toObj();

    finstack.eval('readAll(siteRef=='+selected2+' and energyCost)', function(data){
    var costPrice4 = data.result.toObj()[0].curVal;
    var lastData2 = (firstLastPoint2[0].v0 * costPrice4);
    model.set('lastData2', lastData2);
});
});
}, 200);
});

this.ractive.on("month", function(event) {
    var showItem = model.queryAll('stackRactive');
    showItem.forEach(function(item){
    var dayID = template.view.querySelector("#day");
    var weekID = template.view.querySelector("#week");
    var monthID = template.view.querySelector("#month");
    var yearID = template.view.querySelector("#year");
    monthID.style.backgroundColor = "#7093c1";
    weekID.style.backgroundColor = "#4f7ab3";
    dayID.style.backgroundColor = "#4f7ab3";
    yearID.style.backgroundColor = "#4f7ab3";
  });
    datePick = "thisMonth";
    datePick2 = "lastMonth";
    var point   = model.get("curentData");
    var selected   = model.get("selected");
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected+').hisRead('+datePick+').hisRollup(sum,1hr).hisClip.first', function(data){
    var firstCurrentPoint = data.result.toObj();

finstack.eval('readAll(siteRef=='+selected+' and energyCost)', function(data){
    var costPrice1 = data.result.toObj()[0].curVal;
    var curentData = (firstCurrentPoint[0].v0 * costPrice1);
    model.set('curentData', curentData);
});
});
}, 200);
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected+').hisRead('+datePick2+').hisRollup(sum,1hr).hisClip.first', function(data){
    var firstLastPoint = data.result.toObj();
    
    finstack.eval('readAll(siteRef=='+selected+' and energyCost)', function(data){
    var costPrice2 = data.result.toObj()[0].curVal;
    var lastData = (firstLastPoint[0].v0 * costPrice2);
    model.set('lastData', lastData);
});
});
}, 200);
    var point2   = model.get("curentData2");
    var selected2   = model.get("selected2");
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected2+').hisRead('+datePick+').hisRollup(sum,1hr).hisClip.first', function(data){
    var firstCurrentPoint2 = data.result.toObj();

    finstack.eval('readAll(siteRef=='+selected2+' and energyCost)', function(data){
    var costPrice3 = data.result.toObj()[0].curVal;
    var curentData2 = (firstCurrentPoint2[0].v0 * costPrice3);
    model.set('curentData2', curentData2);
});
});
}, 200);
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected2+').hisRead('+datePick2+').hisRollup(sum,1hr).hisClip.first', function(data){
    var firstLastPoint2 = data.result.toObj();

    finstack.eval('readAll(siteRef=='+selected2+' and energyCost)', function(data){
    var costPrice4 = data.result.toObj()[0].curVal;
    var lastData2 = (firstLastPoint2[0].v0 * costPrice4);
    model.set('lastData2', lastData2);
});
});
}, 200);
});

this.ractive.on("year", function(event) {
    var showItem = model.queryAll('stackRactive');
    showItem.forEach(function(item){
    var dayID = template.view.querySelector("#day");
    var weekID = template.view.querySelector("#week");
    var monthID = template.view.querySelector("#month");
    var yearID = template.view.querySelector("#year");
    yearID.style.backgroundColor = "#7093c1";
    weekID.style.backgroundColor = "#4f7ab3";
    monthID.style.backgroundColor = "#4f7ab3";
    dayID.style.backgroundColor = "#4f7ab3";
  });
    datePick = "thisYear";
    datePick2 = "lastYear";
    var point   = model.get("curentData");
    var selected   = model.get("selected");
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected+').hisRead('+datePick+').hisRollup(sum,1hr).hisClip.first', function(data){
    var firstCurrentPoint = data.result.toObj();

finstack.eval('readAll(siteRef=='+selected+' and energyCost)', function(data){
    var costPrice1 = data.result.toObj()[0].curVal;
    var curentData = (firstCurrentPoint[0].v0 * costPrice1);
    model.set('curentData', curentData);
});
});
}, 200);
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected+').hisRead('+datePick2+').hisRollup(sum,1hr).hisClip.first', function(data){
    var firstLastPoint = data.result.toObj();
    
    finstack.eval('readAll(siteRef=='+selected+' and energyCost)', function(data){
    var costPrice2 = data.result.toObj()[0].curVal;
    var lastData = (firstLastPoint[0].v0 * costPrice2);
    model.set('lastData', lastData);
});
});
}, 200);
    var point2   = model.get("curentData2");
    var selected2   = model.get("selected2");
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected2+').hisRead('+datePick+').hisRollup(sum,1hr).hisClip.first', function(data){
    var firstCurrentPoint2 = data.result.toObj();

    finstack.eval('readAll(siteRef=='+selected2+' and energyCost)', function(data){
    var costPrice3 = data.result.toObj()[0].curVal;
    var curentData2 = (firstCurrentPoint2[0].v0 * costPrice3);
    model.set('curentData2', curentData2);
});
});
}, 200);
setTimeout(function() {
finstack.eval('read(energy and equipRef->siteMeter and siteRef=='+selected2+').hisRead('+datePick2+').hisRollup(sum,1hr).hisClip.first', function(data){
    var firstLastPoint2 = data.result.toObj();

    finstack.eval('readAll(siteRef=='+selected2+' and energyCost)', function(data){
    var costPrice4 = data.result.toObj()[0].curVal;
    var lastData2 = (firstLastPoint2[0].v0 * costPrice4);
    model.set('lastData2', lastData2);
});
});
}, 200);
});

Program

var template = this;
var myTarget = query('targetPoint');
finstack.eval('readAll(meter).sort("navName")', function(data){
template.myPoints=data.result.toObj();
});

Current Site

Template

<div class="s-boxTop">
    <div class="s-horizontal">
        <div class="s-vertical">
            <select class="drop" value={{selected}} on-change="foldUpdate">
                <option>Select...</option>
                  {{#myPoints}}   
                    <option value="{{id}}">{{dis}}</option>
                  {{/myPoints}}
            </select>
          <div class="tempBar">  High:<div class="s-whiteBox">{{#highLow}}{{weatherHigh}}{{weatherHighUnit}}{{/highLow}}</div></div>
          <div class="tempBar">  Low:<div class="s-whiteBox">{{#highLow}}{{weatherLow}}{{weatherLowUnit}}{{/highLow}}</div></div>
        </div>
      <div class="s-vertical">
        <center>
          {{#picId}}<img src='/api/demo/rec/{{picId}}/file' height="60px" width="60px">{{/picId}}
        {{#highLow}}
          <div class="s-temp">
            {{weatherTemp}}{{weatherTempUnit}}
          </div>
            <div style="font-size: 12px;">Current Temp</div>
        {{/highLow}}
        </center>
      </div>
    </div>
</div>

<div class="s-gap"></div>

<div class="s-boxBottom">
    <div class="titleText tooltip">Degree Days
        <span class="tooltiptext">Degree Days ...</span>
    </div>
    <div class="degree">
        <div class="blue">33.5ºdaysF</div>
        <div class="red">0.0ºdaysF</div>
    </div>
    <div class="degreeBar">
        <div class="s-degreeButton selected" id="current" on-click="current">Current Year</div>
        <div class="s-degreeButton" id="last" on-click="last">Last Year</div>
    </div>
</div>

Model

{
    data:
    {
        myPoints:[],
        highLow: [],
        picId: []
    }
}

Style

.titleText{
    font-weight: bold;
    font-size: 20px;
}
.s-boxTop{
    padding: 10px;
    background-color: #fafafa;
    border-radius: 5px;
	width: 100%;
	height: 145px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.s-gap{
    width: 100%;
	height: 15px;
}
.s-boxBottom{
    padding: 10px;
    background-color: #fafafa;
    border-radius: 5px;
	width: 100%;
	height: 145px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.s-horizontal{
    width: 100%;
    display: flex;
	flex-direction: row;
}
.tempBar{
    background-color:#7093c1;
    border-radius:5px;
    height: 40px;
    width: 100%;
    display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	margin-top:7px;
	color: #fff;
}
.s-vertical{
    width:50%;
    display: flex;
	flex-direction: column;
}
.s-temp{
    font-size: 30px;
}
.s-whiteBox{
    width: 250px;
    height: 30px;
    margin-left: 8px;
    margin-right: 5px;
    border-radius: 5px;
    background-color: #fefefe;
    color: #000;
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.titleText{
    font-weight: bold;
    font-size: 20px;
}
.s-box{
    padding: 10px;
    background-color: #fafafa;
    border-radius: 5px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.selected{
    background-color: #7093c1;
}
.degree{
    width: 100%;
    display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.blue{
    background-color: #7093c1;
    width:45%;
    height: 40px;
    border-radius: 5px;
    margin: 3px;
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	color: #fff;
}
.red{
    background-color: #be1e2d;
    width:45%;
    height: 40px;
    border-radius: 5px;
    margin: 3px;
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	color: #fff;
}
.degreeBar{
    width: 100%;
    height:40px;
    margin-top:5px;
    border-radius: 5px;
    background-color: #4f7ab3;
    display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.s-degreeButton{
    color:#fff;
    border-radius: 5px;
    width:100%;
    height: 100%;
    font-weight: bold;
    padding: 10px 5px 10px 5px;
    display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 220px;
    background-color: black;
    opacity: 0.7;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    font-size: 16px;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -100px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

Init

this.ractive.fire("obtainData");
var template = this;
var model = this.ractive;
this.ractive.on("current", function(event) {
    var showItem = model.queryAll('stackRactive');
    showItem.forEach(function(item){
    var currentID = template.view.querySelector("#current");
    var lastID = template.view.querySelector("#last");
    currentID.style.backgroundColor = "#7093c1";
    lastID.style.backgroundColor = "#4f7ab3";
  });
  var selected   = model.get("selected");
setTimeout(function() {
finstack.eval('read(id=='+selected+').degreeDays(thisYear).hisRollup(sum, 1yr)', function(data){
    var degree = data.result.toObj();
model.set('degree', degree);
});
}, 200);
});

this.ractive.on("last", function(event) {
    var showItem = model.queryAll('stackRactive');
    showItem.forEach(function(item){
    var currentID = template.view.querySelector("#current");
    var lastID = template.view.querySelector("#last");
    lastID.style.backgroundColor = "#7093c1";
    currentID.style.backgroundColor = "#4f7ab3";
  });
var selected   = model.get("selected");
setTimeout(function() {
finstack.eval('read(id=='+selected+').degreeDays(lastYear).hisRollup(sum, 1yr)', function(data){
    var degree = data.result.toObj();
model.set('degree', degree);
});
}, 200);
});

model.on('foldUpdate', function(event) {
    var selected   = model.get("selected");
setTimeout(function() {
finstack.eval('readAll(id=='+selected+')', function(data){
    var highLow = data.result.toObj();
    var pic = highLow[0].imageRef;
    var picId = pic.substr(1);
model.set('highLow', highLow);
model.set('picId', picId);
});
}, 200);
});

Program

var template = this;
finstack.eval('readAll(site)', function(data){
template.myPoints=data.result.toObj();
});

Building kW Peak

Template

    <div class="s-box">
        <span class="titleText">Building Kw Peak</span>
<div style="width:100%;">
    <center>
    <select class="drop2" value={{selectedDrop}} on-change="foldUpdate">
        <option>Select...</option>
        {{#myPoints}}
        <option value="{{siteRef}}">{{dis}}</option>
        {{/myPoints}}
    </select>
    
    <div class="s-bar2" style="background-color:#6cc487;"><b>Current:</b>
    <div class="whiteBox3">{{#currentData}}{{v0.toFixed(2)}}Kw<br>{{ts}}{{/currentData}}</div>
    </div>
    <div class="s-bar2" style="background-color:#8c68b2; color:#fff;"><b>Last:</b>
    <div class="whiteBox3">{{#lastData}}{{v0.toFixed(2)}}Kw<br>{{ts}}{{/lastData}}</div>
    </div>
    
    <div class="buttonBar">
        <div class="s-button selected" id="day2" on-click="day2">Day</div>
        <div class="s-button" id="week2" on-click="week2">Week</div>
        <div class="s-button" id="month2" on-click="month2">Month</div>
        <div class="s-button" id="year2" on-click="year2">Year</div>
    </div>
    </center>
</div>
    </div>

Model

{
    data:
    {
        myPoints:[],
        currentData:[],
        lastData:[]
    }
}

Style

.titleText{
    font-weight: bold;
    font-size: 20px;
}
.s-box{
    padding: 10px;
    background-color: #fafafa;
    border-radius: 5px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.selected{
    background-color: #7093c1;
}
.drop2{
    width:100%;
    margin-top: 35px;
}
.s-bar2{
    margin-top:20px;
    height:50px;
    width:100%;
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex-grow:1;
	justify-content: flex-end;
	align-items: center;
	border-radius: 5px;
}
.whiteBox3{
    width: 80%;
    height: 40px;
    margin-right: 5px;
    margin-left: 5px;
    border-radius: 5px;
    background-color: #fefefe;
    color: #000;
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.buttonBar{
    width:100%;
    height:40px;
    margin-top:15px;
    border-radius: 5px;
    background-color: #4f7ab3;
    display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.s-button{
    color:#fff;
    border-radius: 5px;
    width:100%;
    height: 100%;
    font-weight: bold;
    padding: 10px 15px 10px 15px;
    display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

Init

this.ractive.fire("obtainData");
var template = this;
var model = this.ractive;
var myTarget = model.queryAll('targetPoint');
var datePick = "today";
var datePick2 = "yesterday";
 
model.on('foldUpdate', function(event) {
var selectedDrop   = model.get("selectedDrop");
setTimeout(function() {
finstack.eval('read(powerTotal and equipRef->tenantMeter and siteRef=='+selectedDrop+').hisRead('+datePick+').hisRollup(max, 1hr).hisClip.first()', function(data){
    var currentPoint = data.result.toObj();
model.set('currentData', currentPoint);
});
}, 200);
setTimeout(function() {
finstack.eval('read(powerTotal and equipRef->tenantMeter and siteRef=='+selectedDrop+').hisRead('+datePick2+').hisRollup(max, 1hr).hisClip.first()', function(data){
    var lastPoint = data.result.toObj();
model.set('lastData', lastPoint);
});
}, 200);
});


this.ractive.on("day2", function(event) {
    var showItem = model.queryAll('stackRactive');
    showItem.forEach(function(item){
    var dayID = template.view.querySelector("#day2");
    var weekID = template.view.querySelector("#week2");
    var monthID = template.view.querySelector("#month2");
    var yearID = template.view.querySelector("#year2");
    dayID.style.backgroundColor = "#7093c1";
    weekID.style.backgroundColor = "#4f7ab3";
    monthID.style.backgroundColor = "#4f7ab3";
    yearID.style.backgroundColor = "#4f7ab3";
  });
    var datePick = "today";
    var datePick2 = "yesterday";
    var selectedDrop   = model.get("selectedDrop");
setTimeout(function() {
finstack.eval('read(powerTotal and equipRef->tenantMeter and siteRef=='+selectedDrop+').hisRead('+datePick+').hisRollup(max, 1hr).hisClip.first()', function(data){
    var currentPoint = data.result.toObj();
model.set('currentData', currentPoint);
console.log(currentPoint);
});
}, 200);
setTimeout(function() {
finstack.eval('read(powerTotal and equipRef->tenantMeter and siteRef=='+selectedDrop+').hisRead('+datePick2+').hisRollup(max, 1hr).hisClip.first()', function(data){
    var lastPoint = data.result.toObj();
model.set('lastData', lastPoint);
});
}, 200);
});

this.ractive.on("week2", function(event) {
    var showItem = model.queryAll('stackRactive');
    showItem.forEach(function(item){
    var dayID = template.view.querySelector("#day2");
    var weekID = template.view.querySelector("#week2");
    var monthID = template.view.querySelector("#month2");
    var yearID = template.view.querySelector("#year2");
    weekID.style.backgroundColor = "#7093c1";
    dayID.style.backgroundColor = "#4f7ab3";
    monthID.style.backgroundColor = "#4f7ab3";
    yearID.style.backgroundColor = "#4f7ab3";
  });
    datePick = "thisWeek";
    datePick2 = "lastWeek";
    var selectedDrop   = model.get("selectedDrop");
setTimeout(function() {
finstack.eval('read(powerTotal and equipRef->tenantMeter and siteRef=='+selectedDrop+').hisRead('+datePick+').hisRollup(max, 1hr).hisClip.first()', function(data){
    var currentPoint = data.result.toObj();
model.set('currentData', currentPoint);
});
}, 200);
setTimeout(function() {
finstack.eval('read(powerTotal and equipRef->tenantMeter and siteRef=='+selectedDrop+').hisRead('+datePick2+').hisRollup(max, 1hr).hisClip.first()', function(data){
    var lastPoint = data.result.toObj();
model.set('lastData', lastPoint);
});
}, 200);
});

this.ractive.on("month2", function(event) {
    var showItem = model.queryAll('stackRactive');
    showItem.forEach(function(item){
    var dayID = template.view.querySelector("#day2");
    var weekID = template.view.querySelector("#week2");
    var monthID = template.view.querySelector("#month2");
    var yearID = template.view.querySelector("#year2");
    monthID.style.backgroundColor = "#7093c1";
    weekID.style.backgroundColor = "#4f7ab3";
    dayID.style.backgroundColor = "#4f7ab3";
    yearID.style.backgroundColor = "#4f7ab3";
  });
    datePick = "thisMonth";
    datePick2 = "lastMonth";
    var selectedDrop   = model.get("selectedDrop");
setTimeout(function() {
finstack.eval('read(powerTotal and equipRef->tenantMeter and siteRef=='+selectedDrop+').hisRead('+datePick+').hisRollup(max, 1hr).hisClip.first()', function(data){
    var currentPoint = data.result.toObj();
model.set('currentData', currentPoint);
});
}, 200);
setTimeout(function() {
finstack.eval('read(powerTotal and equipRef->tenantMeter and siteRef=='+selectedDrop+').hisRead('+datePick2+').hisRollup(max, 1hr).hisClip.first()', function(data){
    var lastPoint = data.result.toObj();
model.set('lastData', lastPoint);
});
}, 200);
});

this.ractive.on("year2", function(event) {
    var showItem = model.queryAll('stackRactive');
    showItem.forEach(function(item){
    var dayID = template.view.querySelector("#day2");
    var weekID = template.view.querySelector("#week2");
    var monthID = template.view.querySelector("#month2");
    var yearID = template.view.querySelector("#year2");
    yearID.style.backgroundColor = "#7093c1";
    weekID.style.backgroundColor = "#4f7ab3";
    monthID.style.backgroundColor = "#4f7ab3";
    dayID.style.backgroundColor = "#4f7ab3";
  });
    datePick = "thisYear";
    datePick2 = "lastYear";
    var selectedDrop   = model.get("selectedDrop");
setTimeout(function() {
finstack.eval('read(powerTotal and equipRef->tenantMeter and siteRef=='+selectedDrop+').hisRead('+datePick+').hisRollup(max, 1hr).hisClip.first()', function(data){
    var currentPoint = data.result.toObj();
model.set('currentData', currentPoint);
});
}, 200);
setTimeout(function() {
finstack.eval('read(powerTotal and equipRef->tenantMeter and siteRef=='+selectedDrop+').hisRead('+datePick2+').hisRollup(max, 1hr).hisClip.first()', function(data){
    var lastPoint = data.result.toObj();
model.set('lastData', lastPoint);
});
}, 200);
});

Program

var template = this;
var myTarget = query('targetPoint');
finstack.eval('readAll(meter)', function(data){
template.myPoints=data.result.toObj();
});

Gauges

Template

<div class="s-box">
    <div class="horizontal">
    <select class="s-dropDown" value={{selected}} on-change="foldUpdate">
        {{#drop}}
        <option value={{id}}>{{dis}}</option>
        {{/drop}}
    </select>
    <select class="s-dropDown2 mnl" value={{selected2}} on-change="foldUpdate">
        {{#drop2}}
        <option value={{id}}>{{navName}}</option>
        {{/drop2}}
    </select>
    </div>
<div class="rowSVG">
{{#myPoints.0}}
  <svg class="s-heightSVG" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.9 78.51">
      <title>phaseA</title>
  <path d="M70.4,126a1,1,0,0,0,1-1,23,23,0,0,1,46,0,1,1,0,0,0,1,1h25a1,1,0,0,0,1-1,50,50,0,0,0-100,0,1,1,0,0,0,1,1Z" transform="translate(-32.52 -61.49)" style="fill: rgb(127, 127, 127);"></path>
  <text transform="translate(48.87 6.64)" style="font-size: 8px; font-family: SourceSansPro-Regular, "Source Sans Pro";">Phase A</text>
  <text transform="translate(10 66.76)" style="font-size:8px; font-family:SourceSansPro-Regular, Source Sans Pro" text-anchor="end">{{min}}</text>
  <text transform="translate(114 66.76)" style="font-size:8px;font-family:SourceSansPro-Regular, Source Sans Pro" text-anchor="start">{{max}}</text>
  <circle cx="61.85" cy="64.51" r="14" style="fill: rgb(86, 140, 189);"></circle>
      <path d="M57.9,59.10l3.06-33.91a.94.94,0,0,1,1.88,0l3.06,33.91Z" transform="rotate({{rotateVal}} 61.85,64.51)" style="fill:#568cbd" /> 
  <text transform="translate(62 67.76)" style="text-anchor: middle; font-size: 6px; fill: rgb(255, 255, 255); font-family: SourceSansPro-Light;Source Sans Pro;">{{curVal.toFixed(1)}}</text>
  </svg>
{{/myPoints.0}}
{{#myPoints.1}}
  <svg class="s-heightSVG" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.9 78.51">
      <title>phaseB</title>
  <path d="M70.4,126a1,1,0,0,0,1-1,23,23,0,0,1,46,0,1,1,0,0,0,1,1h25a1,1,0,0,0,1-1,50,50,0,0,0-100,0,1,1,0,0,0,1,1Z" transform="translate(-32.52 -61.49)" style="fill: rgb(127, 127, 127);"></path>
  <text transform="translate(48.87 6.64)" style="font-size: 8px; font-family: SourceSansPro-Regular, "Source Sans Pro";">Phase B</text>
  <text transform="translate(10 66.76)" style="font-size:8px; font-family:SourceSansPro-Regular, Source Sans Pro" text-anchor="end">{{min}}</text>
  <text transform="translate(114 66.76)" style="font-size:8px;font-family:SourceSansPro-Regular, Source Sans Pro" text-anchor="start">{{max}}</text>
  <circle cx="61.85" cy="64.51" r="14" style="fill: rgb(86, 140, 189);"></circle>
      <path d="M57.9,59.10l3.06-33.91a.94.94,0,0,1,1.88,0l3.06,33.91Z" transform="rotate({{rotateVal}} 61.85,64.51)" style="fill:#568cbd" /> 
  <text transform="translate(62 67.76)" style="text-anchor: middle; font-size: 6px; fill: rgb(255, 255, 255); font-family: SourceSansPro-Light;Source Sans Pro;">{{curVal.toFixed(1)}}</text>
  </svg>
{{/myPoints.1}}
{{#myPoints.2}}
  <svg class="s-heightSVG" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.9 78.51">
      <title>phaseC</title>
  <path d="M70.4,126a1,1,0,0,0,1-1,23,23,0,0,1,46,0,1,1,0,0,0,1,1h25a1,1,0,0,0,1-1,50,50,0,0,0-100,0,1,1,0,0,0,1,1Z" transform="translate(-32.52 -61.49)" style="fill: rgb(127, 127, 127);"></path>
  <text transform="translate(48.87 6.64)" style="font-size: 8px; font-family: SourceSansPro-Regular, "Source Sans Pro";">Phase C</text>
  <text transform="translate(10 66.76)" style="font-size:8px; font-family:SourceSansPro-Regular, Source Sans Pro" text-anchor="end">{{min}}</text>
  <text transform="translate(114 66.76)" style="font-size:8px;font-family:SourceSansPro-Regular, Source Sans Pro" text-anchor="start">{{max}}</text>
  <circle cx="61.85" cy="64.51" r="14" style="fill: rgb(86, 140, 189);"></circle>
      <path d="M57.9,59.10l3.06-33.91a.94.94,0,0,1,1.88,0l3.06,33.91Z" transform="rotate({{rotateVal}} 61.85,64.51)" style="fill:#568cbd" /> 
  <text transform="translate(62 67.76)" style="text-anchor: middle; font-size: 6px; fill: rgb(255, 255, 255); font-family: SourceSansPro-Light;Source Sans Pro;">{{curVal.toFixed(1)}}</text>
  </svg>
{{/myPoints.2}}
</div>
    <div class="buttonBarGauge">
        <div class="s-button selected" id="kw" on-click="kw">Kw</div>
        <div class="s-button" id="kva" on-click="kva">Kva</div>
        <div class="s-button" id="kvar" on-click="kvar">Kvar</div>
        <div class="s-button" id="current" on-click="current">Current</div>
        <div class="s-button" id="pf" on-click="pf">Pf</div>
    </div>
</div>

Model

{
    data:
    {
        myPoints:[]
    }
}

Style

.s-box{
    padding: 10px;
    background-color: #fafafa;
    border-radius: 5px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	flex: 1 1 auto;
}
.s-heightSVG{
    height: 200px;
    margin-right: 40px;
}
.rowSVG{
    margin-top: 10px;
    height: 184px;
    display: flex;
	flex-direction: row;
	justify-content: center;
}
.selected{
    background-color: #7093c1;
}
.buttonBarGauge{
    width:100%;
    height:40px;
    margin-top:35px;
    border-radius: 5px;
    background-color: #4f7ab3;
    display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-end;
}
.s-button{
    color:#fff;
    border-radius: 5px;
    width:100%;
    height: 100%;
    font-weight: bold;
    padding: 10px 15px 10px 15px;
    display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

Init

this.ractive.fire("obtainData"); var template = this; var model = this.ractive; var myTarget = model.queryAll('targetPoint'); 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('drop2', template.newMeter); var point2 = model.get("drop2"); }); },200); var showItem = model.queryAll('stackRactive'); showItem.forEach(function(item){ var kwID = template.view.querySelector("#kw"); var kvaID = template.view.querySelector("#kva"); var kvarID = template.view.querySelector("#kvar"); var currentID = template.view.querySelector("#current"); var pfID = template.view.querySelector("#pf"); kwID.style.backgroundColor = "#7093c1"; kvaID.style.backgroundColor = "#4f7ab3"; kvarID.style.backgroundColor = "#4f7ab3"; currentID.style.backgroundColor = "#4f7ab3"; pfID.style.backgroundColor = "#4f7ab3"; }); var selected2 = model.get("selected2"); finstack.eval('readAll(equipRef=='+selected2+' and power and cur and his and point and sensor and not apparent and not reactive and not powerTotal).sort("phase")').then(function(data) { var myPoints = []; var realPoints = data.result.toObj(); realPoints.forEach(function(p,index) { myPoints.push({ curVal : p.curVal, rotateVal : fin.Utils.ResetBAS(p.curVal, 0, 5000, -90, 90), min : 0, max : 5000 }); }); template.ractive.set({'myPoints':myPoints}); }); }); this.ractive.on("kw", function(event) { var showItem = model.queryAll('stackRactive'); showItem.forEach(function(item){ var kwID = template.view.querySelector("#kw"); var kvaID = template.view.querySelector("#kva"); var kvarID = template.view.querySelector("#kvar"); var currentID = template.view.querySelector("#current"); var pfID = template.view.querySelector("#pf"); kwID.style.backgroundColor = "#7093c1"; kvaID.style.backgroundColor = "#4f7ab3"; kvarID.style.backgroundColor = "#4f7ab3"; currentID.style.backgroundColor = "#4f7ab3"; pfID.style.backgroundColor = "#4f7ab3"; }); var selected2 = model.get("selected2"); finstack.eval('readAll(equipRef=='+selected2+' and power and cur and his and point and sensor and not apparent and not reactive and not powerTotal).sort("phase")').then(function(data) { var myPoints = []; var realPoints = data.result.toObj(); realPoints.forEach(function(p,index) { myPoints.push({ curVal : p.curVal, rotateVal : fin.Utils.ResetBAS(p.curVal, 0, 5000, -90, 90), min : 0, max : 5000 }); }); template.ractive.set({'myPoints':myPoints}); }); }); this.ractive.on("kva", function(event) { var showItem = model.queryAll('stackRactive'); showItem.forEach(function(item){ var kwID = template.view.querySelector("#kw"); var kvaID = template.view.querySelector("#kva"); var kvarID = template.view.querySelector("#kvar"); var currentID = template.view.querySelector("#current"); var pfID = template.view.querySelector("#pf"); kwID.style.backgroundColor = "#4f7ab3"; kvaID.style.backgroundColor = "#7093c1"; kvarID.style.backgroundColor = "#4f7ab3"; currentID.style.backgroundColor = "#4f7ab3"; pfID.style.backgroundColor = "#4f7ab3"; }); var selected2 = model.get("selected2"); finstack.eval('readAll(equipRef=='+selected2+' and power and cur and his and point and sensor and apparent and not reactive and not powerTotal).sort("phase")').then(function(data) { var myPoints = []; var realPoints = data.result.toObj(); realPoints.forEach(function(p,index) { myPoints.push({ curVal : p.curVal, rotateVal : fin.Utils.ResetBAS(p.curVal, 0, 2000, -90, 90), min : 0, max : 2000 }); }); model.set({'myPoints':myPoints}); }); }); this.ractive.on("kvar", function(event) { var showItem = model.queryAll('stackRactive'); showItem.forEach(function(item){ var kwID = template.view.querySelector("#kw"); var kvaID = template.view.querySelector("#kva"); var kvarID = template.view.querySelector("#kvar"); var currentID = template.view.querySelector("#current"); var pfID = template.view.querySelector("#pf"); kwID.style.backgroundColor = "#4f7ab3"; kvaID.style.backgroundColor = "#4f7ab3"; kvarID.style.backgroundColor = "#7093c1"; currentID.style.backgroundColor = "#4f7ab3"; pfID.style.backgroundColor = "#4f7ab3"; }); var selected2 = model.get("selected2"); finstack.eval('readAll(equipRef=='+selected2+' and power and cur and his and point and sensor and apparent and not reactive and not powerTotal).sort("phase")').then(function(data) { var myPoints = []; var realPoints = data.result.toObj(); realPoints.forEach(function(p,index) { myPoints.push({ curVal : p.curVal, rotateVal : fin.Utils.ResetBAS(p.curVal, 0, 2000, -90, 90), min : 0, max : 2000 }); }); model.set({'myPoints':myPoints}); }); }); this.ractive.on("current", function(event) { var showItem = model.queryAll('stackRactive'); showItem.forEach(function(item){ var kwID = template.view.querySelector("#kw"); var kvaID = template.view.querySelector("#kva"); var kvarID = template.view.querySelector("#kvar"); var currentID = template.view.querySelector("#current"); var pfID = template.view.querySelector("#pf"); kwID.style.backgroundColor = "#4f7ab3"; kvaID.style.backgroundColor = "#4f7ab3"; kvarID.style.backgroundColor = "#4f7ab3"; currentID.style.backgroundColor = "#7093c1"; pfID.style.backgroundColor = "#4f7ab3"; }); var selected2 = model.get("selected2"); finstack.eval('readAll(equipRef=='+selected2+' and cur and his and point and current and not currentAverage and not currentTotal).sort("phase")').then(function(data) { var myPoints = []; var realPoints = data.result.toObj(); realPoints.forEach(function(p,index) { myPoints.push({ curVal : p.curVal, rotateVal : fin.Utils.ResetBAS(p.curVal, 0, 2000, -90, 90), min : 0, max : 2000 }); }); model.set({'myPoints':myPoints}); }); }); this.ractive.on("pf", function(event) { var showItem = model.queryAll('stackRactive'); showItem.forEach(function(item){ var kwID = template.view.querySelector("#kw"); var kvaID = template.view.querySelector("#kva"); var kvarID = template.view.querySelector("#kvar"); var currentID = template.view.querySelector("#current"); var pfID = template.view.querySelector("#pf"); kwID.style.backgroundColor = "#4f7ab3"; kvaID.style.backgroundColor = "#4f7ab3"; kvarID.style.backgroundColor = "#4f7ab3"; currentID.style.backgroundColor = "#4f7ab3"; pfID.style.backgroundColor = "#7093c1"; }); var selected2 = model.get("selected2"); finstack.eval('readAll(equipRef=='+selected2+' and cur and his and point and pf and not powerFactorTotal).sort("phase")').then(function(data) { var myPoints = []; var realPoints = data.result.toObj(); realPoints.forEach(function(p,index) { myPoints.push({ curVal : p.curVal, rotateVal : fin.Utils.ResetBAS(p.curVal, -10, 10, -90, 90), min : -10, max : 10 }); }); model.set({'myPoints':myPoints}); }); });

Program

var template = this;
var myTarget = query('targetPoint');
finstack.eval('readAll(site).sort("dis")', function(data){
template.drop=data.result.toObj();
dropdown = template.drop;
});
setTimeout(function() {
finstack.eval('readAll(equip and meter and siteRef=='+ dropdown[0].id +')', function(data){
template.drop2=data.result.toObj();
dropdown2 = template.drop2;
var myId = template.drop2[0].id;
});
}, 200);
setTimeout(function() {
    finstack.eval('readAll(equipRef=='+myId+' and power and cur and his and point and sensor and not apparent and not reactive and not powerTotal).sort("phase")').then(function(data) {
    var myPoints      = [];
    var realPoints  = data.result.toObj();
    realPoints.forEach(function(p,index) {
        myPoints.push({
            curVal       : p.curVal,
            rotateVal    : fin.Utils.ResetBAS(p.curVal, 0, 5000, -90, 90),
            min          : 0,
            max          : 5000
        });
    });
    template.ractive.set({'myPoints':myPoints});
});
}, 400);

AM Chart

Template

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

Model

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

Style

.s-box{
    padding: 10px;
    background-color: #fafafa;
    border-radius: 5px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.s-dropDown{
    width:150px;
    height:30px;
}
.s-dropDown2{
    width:200px;
    height:30px;
}
.s-chart{
    height:90%;
}
.s-date:hover{
    background-color: #c9c7c7;
}
.s-date{
    height:30px;
    cursor: pointer;
    border-radius: 4.5px;
}
.s-space{
    margin-left:20px;
}
.s-click:hover{
    cursor: pointer;
    color: #537bb1;
}

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){
queryData=data.result.toObj();
var newPoints      = [];
    var realPoints  = data.result.toObj();
    realPoints.forEach(function(p,index) {
        newPoints.push({
            v0      : p.v0.toFixed(1),
            ts      : p.ts
        });
    });
var test = template.view.querySelector("#amChart");
AmCharts.addInitHandler(function(chart) {
  if (chart.chartScrollbar === undefined || !chart.chartScrollbar.autoHide)
    return;
  chart.addListener("zoomed", function(event) {
    var enabled = true;
    if (event.startIndex === 0 && event.endIndex === (chart.dataProvider.length - 1))
      enabled = false;
    if (event.chart.chartScrollbar.enabled === enabled)
      return;
    event.chart.chartScrollbar.enabled = enabled;
    event.chart.validateNow(false, true);
  });
}, ["serial"]);
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 L:NN A",
    "zoomable": true
  },
  "chartScrollbar": {
    "autoHide": true
  },
  "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
  },
} );
} );
}, 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(1),
            ts      : p.ts
        });
    });
var test = template.view.querySelector("#amChart");
AmCharts.addInitHandler(function(chart) {
  if (chart.chartScrollbar === undefined || !chart.chartScrollbar.autoHide)
    return;
  chart.addListener("zoomed", function(event) {
    var enabled = true;
    if (event.startIndex === 0 && event.endIndex === (chart.dataProvider.length - 1))
      enabled = false;
    if (event.chart.chartScrollbar.enabled === enabled)
      return;
    event.chart.chartScrollbar.enabled = enabled;
    event.chart.validateNow(false, true);
  });
}, ["serial"]);
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 L:NN A",
    "zoomable": true
  },
  "chartScrollbar": {
    "autoHide": true
  },
  "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
  },
} );
} );
}, 1000);
      ractive.set('myStart', startDate);
      ractive.set('myEnd', endDate);
      ractive.set('myCompareStart', "None");
      ractive.set('myCompareEnd', "None");
     },
    {periods:false});
});

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 +').finHisReadBaselineCore('+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(1),
            v0base  : p.v0base.toFixed(1),
            ts      : p.ts
        });
    });
var test = template.view.querySelector("#amChart");
AmCharts.addInitHandler(function(chart) {
  if (chart.chartScrollbar === undefined || !chart.chartScrollbar.autoHide)
    return;
  chart.addListener("zoomed", function(event) {
    var enabled = true;
    if (event.startIndex === 0 && event.endIndex === (chart.dataProvider.length - 1))
      enabled = false;
    if (event.chart.chartScrollbar.enabled === enabled)
      return;
    event.chart.chartScrollbar.enabled = enabled;
    event.chart.validateNow(false, true);
  });
}, ["serial"]);
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 L:NN A",
    "zoomable": true
  },
  "chartScrollbar": {
    "autoHide": true
  },
  "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
  },
} );
} );
}, 1000);
      ractive.set('myCompareStart', startCompareDate);
      ractive.set('myCompareEnd', endCompareDate);
     },
    {periods:false});
});

Program

var template = this;
var myTarget = query('targetPoint');
var dropdown;
var dropdown2;
finstack.eval('readAll(site).sort("dis")', 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(1),
ts : p.ts
});
});
var test = template.view.querySelector("#amChart");

AmCharts.addInitHandler(function(chart) {
if (chart.chartScrollbar === undefined || !chart.chartScrollbar.autoHide)
return;
chart.addListener("zoomed", function(event) {
var enabled = true;
if (event.startIndex === 0 && event.endIndex === (chart.dataProvider.length - 1))
enabled = false;
if (event.chart.chartScrollbar.enabled === enabled)
return;
event.chart.chartScrollbar.enabled = enabled;
event.chart.validateNow(false, true);
});
}, ["serial"]);

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 L:NN A",
"zoomable": true
},
"chartScrollbar": {
"autoHide": true
},
"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);