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

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

<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;
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
                                    },
                                    "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});
                                        }                  
else if(selectedDate=="today"){

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

myVar = setInterval(function(){ 

        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);
});
}, 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 = 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) {
    clearInterval(myVar);
    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;
var myTarget = query('targetPoint');
finstack.eval('readAll(his and point and equipRef=='+myTarget.pointId+' and kind=="Number")', function(data){
myRactive.myPoints  = data.result.toObj();
});

Multiple AM Chart Dropdown

Make Your Own

Ractive

Template

Model

Style

Init

Program

Creating this with a Refresh on Today

Ractive

Template

Model

Style

Init

Program