Am Chart Dates with Tags
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);