Make Your Own
- Drag out AM|Charts from the left menu
- Right click and select Show/Hide
- Next drag out Ractive from the components menu, and resize it to the desired size
- Next under the properties menu on the left side, select ractive editor, and Open Editor
- In the editor, copy and paste the code below
Template
<div class="s-horizontal">
<div class="selectDate" on-click="showHide">Select...</div>
<select style="height:40px; margin-right:5px;" on-change="foldUpdate" value={{selectedDate}}>
<option value="today">Today</option>
<option value="yesterday">Yesterday</option>
<option value="thisWeek">This Week</option>
<option value="lastWeek">Last Week</option>
<option value="now() - 7day .. now()">Last 7 Days</option>
<option value="now() - 1mo .. now()">Last 30 Days</option>
<option value="other">{{#if myStart==myEnd}}{{myStart}}{{else}}{{myStart}} to {{myEnd}}{{/if}}</option>
<option value="range">Custom 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>
<select style="height:200px; margin-top:5px;" id="selectMulti" class="queryOptions" value={{selected}} name="test" on-change="foldUpdate" multiple>
{{#myPoints}}
<option value={{id}}>{{dis}}</option>
{{/myPoints}}
</select>
<div class="s-scroll">
<div id="chart0" style="width:100%; height:100%;"></div>
<div id="chart1" style="width:100%; height:100%;"></div>
<div id="chart2" style="width:100%; height:100%;"></div>
<div id="chart3" style="width:100%; height:100%;"></div>
<div id="chart4" style="width:100%; height:100%;"></div>
<div id="chart5" style="width:100%; height:100%;"></div>
<div id="chart6" style="width:100%; height:100%;"></div>
<div id="chart7" style="width:100%; height:100%;"></div>
<div id="chart8" style="width:100%; height:100%;"></div>
<div id="chart9" style="width:100%; height:100%;"></div>
</div>
Model
{
data:
{
myPoints:[],
myStart:"Date Picker",
myEnd:"Date Picker",
other: "Date Picker",
start: "Start",
end: "End"
}
}
Style
.s-scroll{
width: 100%;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.selectDate{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 40px;
padding-right: 15px;
padding-left: 15px;
background-color: #f8f8f8;
border-radius: 5px;
border: .5px solid #a6a6a6;
margin-right: 5px;
}
.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;
}
.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 self = this;
var model = self.ractive;
var hide = true;
var start;
var end;
setTimeout(function() {
var showHide = self.view.querySelector("#selectMulti");
showHide.style.display = "none";
var customRange = self.view.querySelector("#customRange");
customRange.style.display = "none";
}, 100);
model.on('showHide', function(event) {
if(hide===true){
showHide = self.view.querySelector("#selectMulti");
showHide.style.display = "";
hide=false;
}
else{
showHide = self.view.querySelector("#selectMulti");
showHide.style.display = "none";
hide= true;
}
});
model.on('foldUpdate', function(event) {
var selectedPoints = [];
var selected = model.get("selected");
var selectedDate = model.get("selectedDate");
customRange = self.view.querySelector("#customRange");
customRange.style.display = "none";
if (selectedDate =="range"){
customRange = self.view.querySelector("#customRange");
customRange.style.display = "";
}
if (selectedDate =="other"){
top.app.ShowCalendar(null,function(data)
{
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');
model.set('myStart', startDate);
model.set('myEnd', endDate);
if (start == end){
selectedDate = start;
}
else{
selectedDate = (start+'..'+end);
}
selected.forEach(function(p,index) {
selectedPoints.push({
id : p,
index : 'chart'+index,
});
});
setTimeout(function() {
var test0 = self.view.querySelector("#chart0");
test0.style.display = "none";
var test1 = self.view.querySelector("#chart1");
test1.style.display = "none";
var test2 = self.view.querySelector("#chart2");
test2.style.display = "none";
var test3 = self.view.querySelector("#chart3");
test3.style.display = "none";
var test4 = self.view.querySelector("#chart4");
test4.style.display = "none";
var test5 = self.view.querySelector("#chart5");
test5.style.display = "none";
var test6 = self.view.querySelector("#chart6");
test6.style.display = "none";
var test7 = self.view.querySelector("#chart7");
test7.style.display = "none";
var test8 = self.view.querySelector("#chart8");
test8.style.display = "none";
var test9 = self.view.querySelector("#chart9");
test9.style.display = "none";
selectedPoints.forEach(function(p,index) {
setTimeout(function() {
finstack.eval('readAll(id=='+p.id+')', function(data){
var myTitle=data.result.toObj();
finstack.eval('readAll(id=='+p.id+').hisRead('+selectedDate+')', function(data){
queryData=data.result.toObj();
var queryDataPoints = [];
queryData.forEach(function(p,index) {
queryDataPoints.push({
ts : p.ts,
v0 : p.v0.toFixed(1),
});
});
var test = self.view.querySelector('#'+p.index);
test.style.display = "";
var chart = AmCharts.makeChart(test, {
"type": "serial",
"theme": "light",
"dataProvider": queryDataPoints,
"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,
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": myTitle[0].dis,
}
],
"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 JJ:NN:SS",
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"zoomable": false,
"valueZoomable": true,
"valueLineAlpha": 0.5
},
"valueScrollbar": {
"autoGridCount": true,
"color": "#000000",
"scrollbarHeight": 50
},
"categoryField": "ts",
"categoryAxis": {
"equalSpacing": true,
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"gridPosition": "start",
"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);
}, 1000);
});
},
{periods:true});
}
if(selectedDate!=="other"){
model.set('myStart', "Date Picker");
model.set('myEnd', "Date Picker");
selected.forEach(function(p,index) {
selectedPoints.push({
id : p,
index : 'chart'+index,
});
});
setTimeout(function() {
var test0 = self.view.querySelector("#chart0");
test0.style.display = "none";
var test1 = self.view.querySelector("#chart1");
test1.style.display = "none";
var test2 = self.view.querySelector("#chart2");
test2.style.display = "none";
var test3 = self.view.querySelector("#chart3");
test3.style.display = "none";
var test4 = self.view.querySelector("#chart4");
test4.style.display = "none";
var test5 = self.view.querySelector("#chart5");
test5.style.display = "none";
var test6 = self.view.querySelector("#chart6");
test6.style.display = "none";
var test7 = self.view.querySelector("#chart7");
test7.style.display = "none";
var test8 = self.view.querySelector("#chart8");
test8.style.display = "none";
var test9 = self.view.querySelector("#chart9");
test9.style.display = "none";
selectedPoints.forEach(function(p,index) {
setTimeout(function() {
finstack.eval('readAll(id=='+p.id+')', function(data){
var myTitle=data.result.toObj();
finstack.eval('readAll(id=='+p.id+').hisRead('+selectedDate+')', function(data){
queryData=data.result.toObj();
var queryDataPoints = [];
queryData.forEach(function(p,index) {
queryDataPoints.push({
ts : p.ts,
v0 : p.v0.toFixed(1),
});
});
var test = self.view.querySelector('#'+p.index);
test.style.display = "";
var chart = AmCharts.makeChart(test, {
"type": "serial",
"theme": "light",
"dataProvider": queryDataPoints,
"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,
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": myTitle[0].dis,
}
],
"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 JJ:NN:SS",
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"zoomable": false,
"valueZoomable": true,
"valueLineAlpha": 0.5
},
"valueScrollbar": {
"autoGridCount": true,
"color": "#000000",
"scrollbarHeight": 50
},
"categoryField": "ts",
"categoryAxis": {
"equalSpacing": true,
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"gridPosition": "start",
"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);
}, 1000);
});
}
});
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) {
var selectedPoints = [];
var selected = model.get("selected");
model.set('myStart', "Date Picker");
model.set('myEnd', "Date Picker");
selected.forEach(function(p,index) {
selectedPoints.push({
id : p,
index : 'chart'+index,
});
});
setTimeout(function() {
var test0 = self.view.querySelector("#chart0");
test0.style.display = "none";
var test1 = self.view.querySelector("#chart1");
test1.style.display = "none";
var test2 = self.view.querySelector("#chart2");
test2.style.display = "none";
var test3 = self.view.querySelector("#chart3");
test3.style.display = "none";
var test4 = self.view.querySelector("#chart4");
test4.style.display = "none";
var test5 = self.view.querySelector("#chart5");
test5.style.display = "none";
var test6 = self.view.querySelector("#chart6");
test6.style.display = "none";
var test7 = self.view.querySelector("#chart7");
test7.style.display = "none";
var test8 = self.view.querySelector("#chart8");
test8.style.display = "none";
var test9 = self.view.querySelector("#chart9");
test9.style.display = "none";
selectedPoints.forEach(function(p,index) {
setTimeout(function() {
finstack.eval('readAll(id=='+p.id+')', function(data){
var myTitle=data.result.toObj();
finstack.eval('readAll(id=='+p.id+').hisRead('+start+'..'+end+')', function(data){
queryData=data.result.toObj();
var queryDataPoints = [];
queryData.forEach(function(p,index) {
queryDataPoints.push({
ts : p.ts,
v0 : p.v0.toFixed(1),
});
});
var test = self.view.querySelector('#'+p.index);
test.style.display = "";
var chart = AmCharts.makeChart(test, {
"type": "serial",
"theme": "light",
"dataProvider": queryDataPoints,
"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,
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": myTitle[0].dis,
}
],
"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 JJ:NN:SS",
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"zoomable": false,
"valueZoomable": true,
"valueLineAlpha": 0.5
},
"valueScrollbar": {
"autoGridCount": true,
"color": "#000000",
"scrollbarHeight": 50
},
"categoryField": "ts",
"categoryAxis": {
"equalSpacing": true,
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true,
"gridPosition": "start",
"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);
}, 1000);
});
});
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 stackRactive
- 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 text box 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
var myRactive = this;
finstack.eval('readAll(his and point and equipRef==@1eeaff69-30d84ee5)', function(data){
myRactive.myPoints = data.result.toObj();
});