Multiple AM Chart Dropdown

<div class="horizontal">
  <div class="selectDate" on-click="showHide">Select...</div>
  <select style="height:40px" 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 7 Days</option>
  </select>
</div>
  <select style="height:200px" 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>

{
    data:
    {
        myPoints:[]
    }
}

.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;
    width: 100px;
    background-color: #f8f8f8;
    border-radius: 5px;
    border: .5px solid #a6a6a6;
}

this.ractive.fire("obtainData");
var self    = this;
var model   = self.ractive;
var hide = true;
setTimeout(function() {
var showHide = self.view.querySelector("#selectMulti");
showHide.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");
     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";
    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);
});
});

var myRactive = this;
finstack.eval('readAll(his and point and equipRef==@1eeaff69-30d84ee5)', function(data){
myRactive.myPoints  = data.result.toObj();
});