Including Interval and Fold
Sarah Padilla (Unlicensed)
Owned by Sarah Padilla (Unlicensed)
Template
 Expand source
<div class="s-margin">
<select class="selectSize" on-change="dateChange">
<option value="today">Today</option>
<option value="yesterday">Yesterday</option>
<option value="thisWeek">This Week</option>
<option value="lastWeek">Last Week</option>
<option value="thisMonth">This Month</option>
<option value="lastMonth">Last Month</option>
<option value="other">{{other}}</option>
<option value="range">{{range}}</option>
</select>
<div class="s-horizontal" id="customRange">
<div class="s-text">Custom Date Range: </div>
<div class="s-compare" on-click="start">{{start}}</div>
<div class="s-text">to</div>
<div class="s-compare" on-click="end">{{end}}</div>
<div class="icon-checkmark view-superman-value s-circle" on-click="go"></div>
</div>
<select class="selectSize selectSize2" on-change="intervalChange">
<option disabled selected>Select Interval...</option>
<option value="null">None</option>
<option value="1min">1min</option>
<option value="5min">5min</option>
<option value="10min">10min</option>
<option value="15min">15min</option>
<option value="30min">30min</option>
<option value="1hr">1hr</option>
<option value="1day">1day</option>
<option value="1week">1week</option>
<option value="1mo">1mo</option>
<option value="3mo">3mo</option>
<option value="1yr">1yr</option>
</select>
<select class="selectSize" on-change="foldChange">
<option disabled selected>Select Fold...</option>
<option value="null">None</option>
<option value="avg">avg</option>
<option value="covAvg">covAvg</option>
<option value="max">max</option>
<option value="mean">mean</option>
<option value="meanBiasErr">meanBiasErr</option>
<option value="median">median</option>
<option value="min">min</option>
<option value="rootMeanSquareErr">rootMeanSquareErr</option>
<option value="spread">spread</option>
<option value="standardDeviation">standardDeviation</option>
<option value="sum">sum</option>
</select>
</div>
<div class="floatRight view-superman-value icon-download" on-click="download"></div>
<div id="amChart" style="width:100%; height:90%;"></div>
Model
 Expand source
{
data:
{
other: "Date Picker",
start: "Start",
end : "End",
range: "Custom Range"
}
}
Style
 Expand source
.s-margin{
margin-left: 30px;
width: 100%;
display: flex;
flex-direction: row;
}
.s-horizontal{
display: flex;
flex-direction: row;
}
.s-text{
display: flex;
flex-direction: row;
align-items: center;
height: 30px;
margin-left: 10px;
}
.s-compare{
margin-left: 10px;
height: 30px;
background-color: #f8f8f8;
border: 1.3px solid #bcbcbc;
border-radius: 4px;
padding-right: 8px;
padding-left: 8px;
display: flex;
flex-direction: row;
align-items: center;
}
.s-compare:hover{
cursor: pointer;
background-color: #ededed;
}
.selectSize{
width: 210px;
height: 30px;
margin-right: 50px;
}
.selectSize2{
margin-left: 50px;
}
.s-circle{
border-radius: 50%;
margin-left: 10px;
display: flex;
flex-direction: row;
align-items: center;
font-weight: bold;
justify-content: center;
font-size: 15px;
height: 30px;
width: 30px;
}
.s-circle:hover{
background-color:#63b4e4;
cursor: pointer;
}
.floatRight:hover{
background-color:#63b4e4;
cursor: pointer;
}
.floatRight{
float:right;
display: flex;
flex-direction: row;
align-items: center;
font-weight: bold;
justify-content: center;
font-size: 15px;
height: 30px;
width: 30px;
border-radius: 50%;
}
Init
 Expand source
this.ractive.fire("obtainData");
var template = this;
var model = this.ractive;
var myTarget = model.queryAll('targetPoint');
var title = myTarget.idDis;
var newPoints = [];
var selected = "today";
var start = "Start";
var end = "End";
var fold = "null";
var interval = "null";
setTimeout(function() {
finstack.eval('readAll(foo and equipRef=='+ myTarget[0].pointId +').hisRead(today)', function(data){
queryData=data.result.toObj();
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
newPoints.push({
v0 : p.v0.toFixed(2),
ts : p.ts
});
});
});
},200 );
setTimeout(function() {
var showItem = model.queryAll('stackRactive');
showItem.forEach(function(item){
var test = template.view.querySelector("#customRange");
test.style.visibility = "hidden";
});
},200 );
model.on('dateChange', function(event) {
selected = event.node.value;
if (selected =="other"){
top.app.ShowCalendar(null,function(data){
start = moment(data.range.start).format("YYYY-MM-DD");
var startPretty = new moment(start).format('MMM D, YYYY');
end = moment(data.range.end).format("YYYY-MM-DD");
var endPretty = new moment(end).format('MMM D, YYYY');
if (start == end){
selected = start;
}
else{
selected = (start+'..'+end);
}
var prettyDate="";
if (startPretty == endPretty){
prettyDate = startPretty;
}
else{
prettyDate = (startPretty+' to '+endPretty);
}
setTimeout(function() {
finstack.eval('readAll(foo and equipRef=='+myTarget[0].pointId+').hisRead('+ selected +').hisRollupAuto('+interval+',his =>'+fold+').hisClip', function(data){
queryData=data.result.toObj();
newPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
newPoints.push({
v0 : p.v0.toFixed(2),
ts : p.ts
});
});
var test = template.view.querySelector("#amChart");
var chart = AmCharts.makeChart(test, {
"type": "serial",
"categoryField": "ts",
"categoryAxis": {
"minPeriod": "mm",
"parseDates": true,
"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"
}]
},
"dataProvider": newPoints,
"startDuration": 1,
"theme": "light",
"chartCursor": {
"categoryBalloonDateFormat": "JJ:NN, MMMM DD",
"cursorPosition": "mouse"
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[value]]",
"fillAlphas": 0.7,
"id": "AmGraph-1",
"lineAlpha": 0,
"valueField": "v0",
"title": myTarget[0].dis
}],
"chartScrollbar": {
"graph": "g0",
"scrollbarHeight": 25,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"guides": [],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true
},
"export": {
"enabled": true,
"dateFormat": "YYYY-MM-DD HH:NN:SS"
},
},1000 );
});
}, 200);
model.set('other', prettyDate);
model.set('start', "Start");
model.set('end', "End");
selected = start;
},
{periods:true});
setTimeout(function() {
var showItem = model.queryAll('stackRactive');
showItem.forEach(function(item){
var test = template.view.querySelector("#customRange");
test.style.visibility = "hidden";
});
},200 );
}
else if(selected =="range"){
setTimeout(function() {
model.set('other', "Date Picker");
var showItem = model.queryAll('stackRactive');
showItem.forEach(function(item){
var test = template.view.querySelector("#customRange");
test.style.visibility = "";
});
},200 );
}
else{
setTimeout(function() {
var showItem = model.queryAll('stackRactive');
showItem.forEach(function(item){
var test = template.view.querySelector("#customRange");
test.style.visibility = "hidden";
});
},200 );
setTimeout(function() {
finstack.eval('readAll(foo and equipRef=='+myTarget[0].pointId+').hisRead('+ selected +').hisRollupAuto('+interval+',his =>'+fold+').hisClip', function(data){
queryData=data.result.toObj();
newPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
newPoints.push({
v0 : p.v0.toFixed(2),
ts : p.ts
});
});
var test = template.view.querySelector("#amChart");
var chart = AmCharts.makeChart(test, {
"type": "serial",
"categoryField": "ts",
"categoryAxis": {
"minPeriod": "mm",
"parseDates": true,
"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"
}]
},
"dataProvider": newPoints,
"startDuration": 1,
"theme": "light",
"chartCursor": {
"categoryBalloonDateFormat": "JJ:NN, MMMM DD",
"cursorPosition": "mouse"
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[value]]",
"fillAlphas": 0.7,
"id": "AmGraph-1",
"lineAlpha": 0,
"valueField": "v0",
"title": myTarget[0].navName
}],
"chartScrollbar": {
"graph": "g0",
"scrollbarHeight": 25,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"guides": [],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true
},
"export": {
"enabled": true,
"dateFormat": "YYYY-MM-DD HH:NN:SS"
},
},1000 );
});
}, 200);
model.set('other', "Date Picker");
model.set('start', "Start");
model.set('end', "End");
}
});
model.on('start', function(event) {
top.app.ShowCalendar(null,function(data){
start = moment(data.range.start).format("YYYY-MM-DD");
var startPretty = new moment(start).format('MMM D, YYYY');
model.set('start', startPretty);
});
});
model.on('end', function(event) {
top.app.ShowCalendar(null,function(data){
end = moment(data.range.end).format("YYYY-MM-DD");
var endPretty = new moment(end).format('MMM D, YYYY');
model.set('end', endPretty);
});
});
model.on('go', function(event) {
if (start == end){
selected = start;
}
else{
selected = (start+'..'+end);
}
finstack.eval('readAll(foo and equipRef=='+myTarget[0].pointId+').hisRead('+ selected+').hisRollupAuto('+interval+',his =>'+fold+').hisClip', function(data){
queryData=data.result.toObj();
newPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
newPoints.push({
v0 : p.v0.toFixed(2),
ts : p.ts
});
});
var test = template.view.querySelector("#amChart");
var chart = AmCharts.makeChart(test, {
"type": "serial",
"categoryField": "ts",
"categoryAxis": {
"minPeriod": "mm",
"parseDates": true,
"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"
}]
},
"dataProvider": newPoints,
"startDuration": 1,
"theme": "light",
"chartCursor": {
"categoryBalloonDateFormat": "JJ:NN, MMMM DD",
"cursorPosition": "mouse"
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[value]]",
"fillAlphas": 0.7,
"id": "AmGraph-1",
"lineAlpha": 0,
"valueField": "v0",
"title": myTarget[0].navName
}],
"chartScrollbar": {
"graph": "g0",
"scrollbarHeight": 25,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"guides": [],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true
},
"export": {
"enabled": true,
"dateFormat": "YYYY-MM-DD HH:NN:SS"
},
},1000 );
});
});
model.on('foldChange', function(event) {
fold = event.node.value;
var showItem = model.queryAll('stackRactive');
setTimeout(function() {
finstack.eval('readAll(foo and equipRef=='+myTarget[0].pointId+').hisRead('+ selected +').hisRollupAuto('+interval+',his =>'+fold+').hisClip', function(data){
queryData=data.result.toObj();
newPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
newPoints.push({
v0 : p.v0.toFixed(2),
ts : p.ts
});
});
var test = template.view.querySelector("#amChart");
var chart = AmCharts.makeChart(test, {
"type": "serial",
"categoryField": "ts",
"categoryAxis": {
"minPeriod": "mm",
"parseDates": true,
"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"
}]
},
"dataProvider": newPoints,
"startDuration": 1,
"theme": "light",
"chartCursor": {
"categoryBalloonDateFormat": "JJ:NN, MMMM DD",
"cursorPosition": "mouse"
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[value]]",
"fillAlphas": 0.7,
"id": "AmGraph-1",
"lineAlpha": 0,
"valueField": "v0",
"title": myTarget[0].navName
}],
"chartScrollbar": {
"graph": "g0",
"scrollbarHeight": 25,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"guides": [],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true
},
"export": {
"enabled": true,
"dateFormat": "YYYY-MM-DD HH:NN:SS"
},
});
});
}, 500);
});
model.on('intervalChange', function(event) {
interval = event.node.value;
var showItem = model.queryAll('stackRactive');
setTimeout(function() {
finstack.eval('readAll(foo and equipRef=='+myTarget[0].pointId+').hisRead('+ selected +').hisRollupAuto('+interval+',his =>'+fold+').hisClip', function(data){
queryData=data.result.toObj();
newPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
newPoints.push({
v0 : p.v0.toFixed(2),
ts : p.ts
});
});
var test = template.view.querySelector("#amChart");
var chart = AmCharts.makeChart(test, {
"type": "serial",
"categoryField": "ts",
"categoryAxis": {
"minPeriod": "mm",
"parseDates": true,
"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"
}]
},
"dataProvider": newPoints,
"startDuration": 1,
"theme": "light",
"chartCursor": {
"categoryBalloonDateFormat": "JJ:NN, MMMM DD",
"cursorPosition": "mouse"
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[value]]",
"fillAlphas": 0.7,
"id": "AmGraph-1",
"lineAlpha": 0,
"valueField": "v0",
"title": myTarget[0].navName
}],
"chartScrollbar": {
"graph": "g0",
"scrollbarHeight": 25,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"guides": [],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true
},
"export": {
"enabled": true,
"dateFormat": "YYYY-MM-DD HH:NN:SS"
},
});
});
}, 500);
});
model.on('download', function(event) {
console.log("download");
var hquery = template.view.querySelector("#amChart");
console.log("hquery", hquery);
function download(filename, text) {
console.log("filename", filename);
console.log("text", text);
var element = document.createElement('a');
console.log("element", element);
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
if(hquery !== undefined) finstack.eval(hquery+'.ioWriteCsv("")',function(event){
event = event.result.toObj()[0].val;
download("ChartData.csv",event);
});
});
Program
 Expand source
var template = this;
var myTarget = query('targetPoint');
var title = myTarget.navName;
var queryData = query("stackRactive");
finstack.eval('readAll(foo and equipRef=='+ myTarget.pointId +').hisRead(today).hisRollupAuto(null,null).hisClip', function(data){
queryData=data.result.toObj();
var newPoints = [];
var realPoints = data.result.toObj();
realPoints.forEach(function(p,index) {
newPoints.push({
v0 : p.v0.toFixed(2),
ts : p.ts
});
});
setTimeout(function() {
var test = template.view.querySelector("#amChart");
var chart = AmCharts.makeChart(test, {
"type": "serial",
"categoryField": "ts",
"categoryAxis": {
"minPeriod": "mm",
"parseDates": true,
"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"
}]
},
"dataProvider": newPoints,
"startDuration": 1,
"theme": "light",
"chartCursor": {
"categoryBalloonDateFormat": "JJ:NN, MMMM DD",
"cursorPosition": "mouse"
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[value]]",
"fillAlphas": 0.7,
"id": "AmGraph-1",
"lineAlpha": 0,
"valueField": "v0",
"title": title
}],
"chartScrollbar": {
"graph": "g0",
"scrollbarHeight": 25,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"guides": [],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true
},
"export": {
"enabled": true,
"dateFormat": "YYYY-MM-DD HH:NN:SS"
},
} );
} );
}, 200);