Description: This component has a drop down to display today, yesterday, this week, last week, this month, and last month. It also has the option of Date picker which will pull up a calendar and allow the user to select any date. It also has a Custom Range button that will allow the user to select which days to view.

User must add tag showItem on point

Ractive

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>
</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-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;
}
.s-horizontal{
    flex-direction: row;
	align-items: center;
	font-weight: bold;
}
.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;
}

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";
setTimeout(function() {
finstack.eval('readAll(showItem 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');
     var query="";
     if (start == end){
         query = start;
     }
     else{
         query = (start+'..'+end);
     }
     var prettyDate="";
     if (startPretty == endPretty){
         prettyDate = startPretty;
     }
     else{
         prettyDate = (startPretty+' to '+endPretty);
     }
setTimeout(function() {
finstack.eval('readAll(showItem and equipRef=='+myTarget[0].pointId+').hisRead('+ query +').hisRollupAuto(null,null).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
        },
	"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(showItem and equipRef=='+myTarget[0].pointId+').hisRead('+ selected +').hisRollupAuto(null,null).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
        },
	"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) {


finstack.eval('readAll(showItem and equipRef=='+myTarget[0].pointId+').hisRead('+ start +'..'+ end +').hisRollupAuto(null,null).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
        },
	"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 );
});
});

Program

Program Code

var template = this;
var myTarget = query('targetPoint');
var title = myTarget.navName;
var queryData = query("stackRactive");
finstack.eval('readAll(showItem 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
        },
	"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);

FIN Framework

Am Chart Dates with Tags