template
| Code Block |
|---|
<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="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>
</select>
</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
| Code Block |
|---|
{
data:
{
myPoints:[],
myStart:"Date Picker",
myEnd:"Date Picker",
other: "Date Picker"
}
} |
style
| Code Block |
|---|
.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;
}
|
init
...
Description: This component should be placed on an equip. It will display the different points on that equip in a multiple dropdown, so that the user can select and view multiple charts. Click Select... to show/hide these points. There is also a dropdown that allows the user to choose today, yesterday, last week, ect. There is also an option for a date picker, or to create your own custom range.
Make Your Own
Ractive
- Drag out AM|Charts from the left menu
- Right click and select Show/Hide
- Drag and drop this file into the world moment.min.js
- 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
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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
| Code Block | ||||
|---|---|---|---|---|
| ||||
{
data:
{
myPoints:[],
myStart:"Date Picker",
myEnd:"Date Picker",
other: "Date Picker",
start: "Start",
end: "End"
}
}
|
Style
| Code Block | ||||
|---|---|---|---|---|
| ||||
.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
| Code Block | ||||
|---|---|---|---|---|
| ||||
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
| Code Block | ||||
|---|---|---|---|---|
| ||||
var myRactive = this;
var myTarget = query('targetPoint');
finstack.eval('readAll(his and point and equipRef=='+myTarget.pointId+' and kind=="Number")', function(data){
myRactive.myPoints = data.result.toObj();
}); |
Creating this with a Refresh on Today
Ractive
- Drag out AM|Charts from the left menu
- Right click and select Show/Hide
- Drag and drop this file into the world moment.min.js
- 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
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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
| Code Block | ||||
|---|---|---|---|---|
| ||||
{
data:
{
myPoints:[],
myStart:"Date Picker",
myEnd:"Date Picker",
other: "Date Picker",
start: "Start",
end: "End"
}
} |
Style
| Code Block | ||||
|---|---|---|---|---|
| ||||
.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
| Code Block | ||||
|---|---|---|---|---|
| ||||
this.ractive.fire("obtainData"); var self = this; var model = self.ractive; var hide = true; var start; var end; var myVar; 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) { clearInterval(myVar); 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 = ""; } else 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 }, top.app.ShowCalendar(null,function(data) { "valueScrollbar": { var start = moment(data.range.start).format("YYYY-MM-DD"); var end = moment(data.range.end).format("YYYY-MM-DD"); "autoGridCount": true, var dateStringStart = start; "color": "#000000", var startDate = new moment(dateStringStart).format('MMM DD, YYYY'); var dateStringEnd = end;"scrollbarHeight": 50 var endDate = new moment(dateStringEnd).format('MMM DD, YYYY'); }, model.set('myStart', startDate); model.set('myEnd', endDate); "categoryField": "ts", if (start == end){ "categoryAxis": { selectedDate = start; "equalSpacing": true, } else{ "parseDates": true, selectedDate = (start+'..'+end); "dashLength": 1, } selected.forEach(function(p,index) { "minorGridEnabled": true, selectedPoints.push({ id "gridPosition": p"start", index : 'chart'+index, "dateFormats":[ }); }); setTimeout(function() { var test0 = self.view.querySelector("#chart0"); test0.style.display = "period":"nonefff";, var test1 = self.view.querySelector("#chart1"); test1.style.display = "none"; format":"L:NN:SS A" 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 = "period":"noness";, var test5 = self.view.querySelector("#chart5"); test5.style.display = "none"; format":"L:NN:SS A" 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 = "period":"nonemm";, var test9 = self.view.querySelector("#chart9"); test9.style.display = "none";"format":"L:NN A" selectedPoints.forEach(function(p,index) { }, setTimeout(function() { finstack.eval('readAll(id=='+p.id+')', function(data){ { var myTitle=data.result.toObj(); "period":"hh", finstack.eval('readAll(id=='+p.id+').hisRead('+selectedDate+')', function(data){ "format":"L:NN A" queryData=data.result.toObj(); }, var queryDataPoints = []; queryData.forEach(function(p,index) { queryDataPoints.push({ "period":"DD", ts "format": p.ts,"MMM DD" }, v0 : p.v0.toFixed(1), { }); }); "period":"WW", var test = self.view.querySelector('#'+p.index); "format":"MMM DD" test.style.display = ""; }, var chart = AmCharts.makeChart(test, { "type": "serial", { "theme": "light", "period":"MM", "dataProvider": queryDataPoints, "dateformat": "ts",MMM" "value": "GetPrettyValue(v0)", }, "precision" : 1, { "marginRight": 40, "marginLeftperiod": 40,"YYYY", "autoMarginOffset": 20, "format":"YYYY" "dataDateFormat": "HH:mm:ss", }] "valueAxes": [ { }, "id": "v1", "export": { "axisAlpha": 0, "enabled": true "position": "left", }, "ignoreAxisWidth": true }); } ], }); "balloon": { }); "borderThickness": 1, }, 1000); "shadowAlpha": 0}, 1000); },); "titles": [ }, { {periods:true}); "id": "Title-1", } else if(selectedDate=="today"){ model.set('myStart', "Date Picker"); "size": 15, model.set('myEnd', "Date Picker"); selected.forEach(function(p,index) { selectedPoints.push({ "text": myTitle[0].dis, 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 ], "graphs": [ { = 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 = "id": "g1", []; queryData.forEach(function(p,index) { queryDataPoints.push({ ts : p.ts, "balloon": { v0 : p.v0.toFixed(1), }); }); var test = self.view.querySelector('#'+p.index); test.style.display = ""; var chart = AmCharts.makeChart(test, { "droptype": true, "serial", "theme": "light", "dataProvider": queryDataPoints, "date": "ts", "value": "GetPrettyValue(v0)", "precision" : 1, "marginRight": 40, "marginLeft": 40, "adjustBorderColorautoMarginOffset": false20, "dataDateFormat": "HH:mm:ss", "valueAxes": [ { "id": "v1", "axisAlpha": 0, "position": "left", "ignoreAxisWidth": true } ], "colorballoon": "#ffffff",{ "borderThickness": 1, "shadowAlpha": 0, }, "titles": [ { "typeid": "smoothedLineTitle-1", "size": 15, }"text": myTitle[0].dis, } ], "graphs": [ { "id": "g1", "balloon": { "fillAlphasdrop": 0.2true, "adjustBorderColor": false, "color": "#ffffff", "type": "smoothedLine" }, "fillAlphas": 0.2, "bullet": "round", "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "bulletSize": 5, "hideBulletsCount": 50, "lineThickness": 2, "title": "red line", "bulletBorderAlphauseLineColorForBulletBorder": true, "valueField": 1"v0", "balloonText": "<span style='font-size:18px;'>[[v0]]</span>" } ], "chartCursor": { "categoryBalloonDateFormat":"MMM DD YYYY JJ:NN:SS", "valueLineEnabled": true, "bulletColorvalueLineBalloonEnabled": "#FFFFFF"true, "cursorAlpha": 0, "zoomable": false, "valueZoomable": true, "valueLineAlpha": 0.5 }, "valueScrollbar": { "bulletSizeautoGridCount": 5true, "color": "#000000", "scrollbarHeight": 50 }, "categoryField": "ts", "categoryAxis": { "equalSpacing": true, "hideBulletsCountparseDates": 50true, "dashLength": 1, "minorGridEnabled": true, "gridPosition": "start", "lineThicknessdateFormats":[ 2, { "titleperiod": "red linefff", "format":"L:NN:SS A" "useLineColorForBulletBorder": true}, { "valueFieldperiod": "v0ss", "format":"L:NN:SS A" }, "balloonText": "<span style='font-size:18px;'>[[v0]]</span>" { "period":"mm", } ], "format":"L:NN A" }, "chartCursor": { "period":"hh", "format":"L:NN A" "categoryBalloonDateFormat":"MMM DD YYYY JJ:NN:SS", }, { "valueLineEnabledperiod": true"DD", "format":"MMM DD" }, "valueLineBalloonEnabled": true, { "period":"WW", "cursorAlphaformat": 0,"MMM DD" }, { "zoomableperiod": false"MM", "format":"MMM" }, "valueZoomable": true, { "period":"YYYY", "valueLineAlpha": 0.5 "format":"YYYY" }] }, "export": { "enabled": true }, }); }); }); }, 1000); }, 1000); }); myVar = setInterval(function(){ model.set('myStart', "Date Picker"); model.set('myEnd', "Date Picker"valueScrollbar":); { selected.forEach(function(p,index) { selectedPoints.push({ id "autoGridCount": truep, index : 'chart'+index, }); }); setTimeout(function() { var test0 "color": "#000000", "scrollbarHeight": 50 }, = 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 = "categoryField": "ts", []; queryData.forEach(function(p,index) { queryDataPoints.push({ ts : p.ts, "categoryAxis": { v0 : p.v0.toFixed(1), }); }); var test = self.view.querySelector('#'+p.index); test.style.display = ""; var chart = AmCharts.makeChart(test, { "equalSpacingtype": true"serial", "theme": "light", "dataProvider": queryDataPoints, "date": "ts", "value": "GetPrettyValue(v0)", "precision" : 1, "marginRight": 40, "marginLeft": 40, "autoMarginOffset": 20, "parseDatesdataDateFormat": true"HH:mm:ss", "valueAxes": [ { "id": "v1", "axisAlpha": 0, "position": "left", "ignoreAxisWidth": true } ], "balloon": { "dashLengthborderThickness": 1, "shadowAlpha": 0, }, "titles": [ { "minorGridEnabledid": true"Title-1", "size": 15, "text": myTitle[0].dis, } "gridPosition": "start" ], "graphs": [ { "id": "g1", "balloon": { "drop": true, "adjustBorderColor": false, "color": "#ffffff", "dateFormatstype":[ "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", "periodvalueLineEnabled":"fff" true, "valueLineBalloonEnabled": true, "cursorAlpha": 0, "zoomable": false, "valueZoomable": true, "valueLineAlpha": 0.5 }, "valueScrollbar": { "autoGridCount": true, "color": "#000000", "formatscrollbarHeight":"L:NN:SS A" 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" }, { "format":"L:NN:SS A" "period":"mm", "format":"L:NN A" }, { "period":"hh", { "format":"L:NN A" }, { "period":"mmDD", "format":"MMM DD" }, { "format":"L:NN A" "period":"WW", "format":"MMM DD" }, { "period":"MM", { "format":"MMM" }, { "period":"hhYYYY", "format":"YYYY" }] }, "export": { "format":"L:NN A" "enabled": true }, }); }); }); }, 1000); }, 1000); }); }, 60000); } else 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 "period":"DD", "format":"MMM DD"= 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, "periodposition": "WWleft", "ignoreAxisWidth": true } ], "balloon": { "borderThickness": 1, "shadowAlpha": 0, }, "titles": [ { "formatid":"MMM DD" "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", "periodballoonText":"MM" "<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 }, "formatvalueScrollbar":"MMM" { "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":"YYYY", { "period":"ss", "format":"L:NN:SS A" "format":"YYYY" }, { "period":"mm", }] "format":"L:NN A" }, },{ "period":"hh", "format"export:"L:NN {A" }, { "enabled": true "period":"DD", "format":"MMM DD" }, }, { }); "period":"WW", "format":"MMM DD" }); }, { }); "period":"MM", "format":"MMM" }, 1000); { "period":"YYYY", }, 1000); "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 {periods:true}= 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) { clearInterval(myVar); } var selectedPoints = []; var selected = if(selectedDate!=="othermodel.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('+selectedDatestart+'..'+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
| Code Block |
|---|
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
| Code Block | ||||
|---|---|---|---|---|
| ||||
var myRactive = this; var myTarget = query('targetPoint'); finstack.eval('readAll(his and point and equipRef==@1eeaff69-30d84ee5'+myTarget.pointId+' and kind=="Number")', function(data){ myRactive.myPoints = data.result.toObj(); }); |
...