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

FIN Framework

Energy Dashboard

Create Your Own

Ractive

Tagging

Program

Compare Cost of Kw per Sqft.

Template

Model

Style

Init

Program

Current Site

Template

Model

Style

Init

Program

Building kW Peak

Template

Model

Style

Init

Program

Gauges

Template

Model

Style

Init

Program

AM Chart

Template

Model

Style

Init

Program