1 Template
2 Model
3 Style
4 Init
5 Program

Template

<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

{
    data:
    {
        other: "Date Picker",
        start: "Start",
        end  : "End",
        range: "Custom Range"
    }
}

Style

.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

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

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

Including Interval and Fold

Template

Model

Style

Init

Program