Description: This is an AM Chart that can show different queries. It can support up to 8 different lines. To display the default data the Ractive component must be tagged with queryData with the string being the query. An example would be readAll(point and kwh).hisRead(today). It also needs the moment.js file.

Model: HistoryChartBox_toggle.zip

JavaScript: moment.min.js

Make Your Own

Drag out Ractive from components on the left side menu
Under Properties, click ractive editor, then open editor
Copy and paste the code below for template, model, style, and init, into the corresponding tabs

Template

<div class="s-box">
    <div class="searchBar">
        <input id="inputText" class="s-input"/>
        <div class="s-search view-superman-value round icon-search" on-click="search"></div>
    </div>
    <div class="buttonBar">
        <div class="s-button selected" id="day" on-click="day">Today</div>
        <div class="s-button" id="week" on-click="week">This Week</div>
        <div class="s-button" id="month" on-click="month">This Month</div>
        <div class="s-button" id="year" on-click="year">{{#if myStart==myEnd}}{{myStart}}{{else}}{{myStart}}-{{myEnd}}{{/if}}</div>
    </div>
<div id="zoomableValueAxis" style="width:100%; height:100%;"></div>
</div>

Model

{
    data:
    {
        myStart: "Date Picker",
        myEnd: "Date Picker"
    }
}

Style

.s-box{
    padding: 10px;
    background-color: #fafafa;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.selected{
    background-color: #7093c1;
}
.drop2{
    width:100%;
    margin-top: 35px;
}
.s-bar{
    margin-top:20px;
    height:40px;
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow:1;
    justify-content: flex-end;
    align-items: center;
    border-radius: 5px;
}
.whiteBox2{
    width: 80%;
    height: 30px;
    margin-right: 5px;
    margin-left: 5px;
    border-radius: 5px;
    background-color: #fefefe;
    color: #000;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.searchBar{
    width: 100%;
    height: 25px;
    margin-top: 5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.buttonBar{
    width:100%;
    height:35px;
    margin-top:15px;
    border-radius: 5px;
    background-color: #4f7ab3;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.s-input{
    height: 30px;
    width: 100%;
    border-radius: 5px;
    margin-right: 10px;
}
.s-search{
    height: 25px;
    width: 25px;
}
.s-search:hover{
    cursor: pointer;
    background-color: #62bee3;
}
.s-button{
    color:#fff;
    border-radius: 5px;
    width:100%;
    height: 100%;
    font-weight: bold;
    padding: 10px 15px 10px 15px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.alarmInfo{
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.alarmBar{
    width: 100%;
    height: 25px;
    margin-top: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.alarmBarTop{
    width: 100%;
    height: 25px;
    margin-top: 5px;
    margin-right: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.color1{
  background-color: #f0f0f0;
  margin-right: 5px;
  border-radius: 3px;
  height: 100%;
  /*width: 100%;*/
  display: flex;
    flex-direction: row;
    align-items: center;
  padding-right: 5px;
  padding-left: 5px;
}
.color2{
  background-color: #e6e7e9;
  margin-right: 5px;
  border-radius: 3px;
  height: 100%;
  /*width: 100%;*/
  display: flex;
    flex-direction: row;
    align-items: center;
  padding-right: 5px;
  padding-left: 5px;
}
.color3{
  margin-right: 5px;
  border-radius: 3px;
  height: 100%;
  /*width: 100%;*/
  display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  padding-right: 5px;
  padding-left: 5px;
}
.s-equipRefDis{
    width: 25%;
    text-overflow: ellipsis;
    overflow: hidden;
}
.s-alarmText{
    width: 15%;
    text-overflow: ellipsis;
    overflow: hidden;
}
.s-priority{
    width: 10%;
    text-overflow: ellipsis;
    overflow: hidden;
}
.s-ts{
    width: 50%;
    text-overflow: ellipsis;
    overflow: hidden;
}
.color1:hover{
    cursor: pointer;
    background-color: #f5f5f5;
}
.color2:hover{
    cursor: pointer;
    background-color: #ebebeb;
}

Init

var template = this;
var model = this.ractive;
var datePick = "today";
this.ractive.fire("obtainData");

console.log(this.dataQuery);

this.ractive.on("search", function(event) {
var showItem = model.queryAll('stackRactive');
    showItem.forEach(function(item){
    var searchText = template.view.querySelector("#inputText").value;

    var test = template.view.querySelector("#zoomableValueAxis");
setTimeout(function() {
        if(searchText===""){
                      var newQuery= template.dataQuery.replace(/(\.*\hisRead).*$/g,'.hisRead('+datePick+')');
    finstack.eval(newQuery, function(event){
    var cols = [];
    event.result.columns.forEach(function(itm){
        var t = /v\d+/.exec(itm.name);
        if(t !== null && t[0] == t.input){
            console.log("metadata", itm.metadata);
            if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, unit: itm.metadata.unit || null, equipRefDis: itm.metadata.equipRefDis});
            else cols.push({dis: itm.name, col: itm.name});
        }
    });
    console.log("cols",cols);
    
    var grphs = [];
    var cou = 0;
    cols.forEach(function(itm){
        grphs.push({
        "id": "g"+cou,
        "balloonText": ""+itm.equipRefDis+": [["+itm.col+"]] "+itm.unit+"",
        "lineThickness": 2,
        "title": itm.dis,
        "unit" : itm.unit,
        "valueField": itm.col,
        "fillAlphas": 0.2 //Area
        });
        cou++;
    });
console.log("grphs",grphs);
var myData = event.result.toObj();
console.log("myData", myData);
var chartData =[];
var myData2 = [];
    myData.forEach(function(itm){
        myData2.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0 || 0,
            "v1": itm.v1 || 0,
            "v2": itm.v2 || 0,
            "v3": itm.v3 || 0,
            "v4": itm.v4 || 0,
            "v5": itm.v5 || 0,
            "v6": itm.v6 || 0,
            "v7": itm.v7 || 0
        });
    });
    
    myData2.forEach(function(itm){
        chartData.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0.toFixed(1) || null,
            "v1": itm.v1.toFixed(1) || null,
            "v2": itm.v2.toFixed(1) || null,
            "v3": itm.v3.toFixed(1) || null,
            "v4": itm.v4.toFixed(1) || null,
            "v5": itm.v5.toFixed(1) || null,
            "v6": itm.v6.toFixed(1) || null,
            "v7": itm.v7.toFixed(1) || null
        });
    });
console.log("chartData", chartData);
    var chart = AmCharts.makeChart(test, {
    "type": "serial",
    "theme": "light",
    "marginRight": 80,
    "dataProvider": chartData,
    "valueAxes": [{
        "axisAlpha": 0.1
    }],
    "graphs": grphs,
    "zoomOutButtonRollOverAlpha": 0.15,
    "chartCursor": {
        "categoryBalloonDateFormat": "MMMM D L:NN A",
        "cursorPosition": "mouse",
        "showNextAvailable": true
    },
    "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
  "valueScrollbar":{
      "oppositeAxis":false,
      "offset":50,
      "scrollbarHeight":10
    },
    "autoMarginOffset": 5,
    "columnWidth": 1,
    "categoryField": "ts",
    "categoryAxis": {
        "parseDates": true,
        "minPeriod": "mm",
            "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
    }
    });
    console.log(chart);
    chart.addListener("rendered", zoomChart);
    
    zoomChart();
    
    function zoomChart() {
        chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
    }
}
          )}
    
finstack.eval('readAll('+searchText+').hisRead('+datePick+')', function(event){
    var cols = [];
    event.result.columns.forEach(function(itm){
        var t = /v\d+/.exec(itm.name);
        if(t !== null && t[0] == t.input){
            console.log("metadata", itm.metadata);
            if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, unit: itm.metadata.unit || null, equipRefDis: itm.metadata.equipRefDis});
            else cols.push({dis: itm.name, col: itm.name});
        }
    });
    console.log("cols",cols);
    
    var grphs = [];
    var cou = 0;
    cols.forEach(function(itm){
        grphs.push({
        "id": "g"+cou,
        "balloonText": ""+itm.equipRefDis+": [["+itm.col+"]] "+itm.unit+"",
        "lineThickness": 2,
        "title": itm.dis,
        "unit" : itm.unit,
        "valueField": itm.col,
        "fillAlphas": 0.2 //Area
        });
        cou++;
    });
console.log("grphs",grphs);
var myData = event.result.toObj();
console.log("myData", myData);
var chartData =[];
var myData2 = [];
    myData.forEach(function(itm){
        myData2.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0 || 0,
            "v1": itm.v1 || 0,
            "v2": itm.v2 || 0,
            "v3": itm.v3 || 0,
            "v4": itm.v4 || 0,
            "v5": itm.v5 || 0,
            "v6": itm.v6 || 0,
            "v7": itm.v7 || 0
        });
    });
    
    myData2.forEach(function(itm){
        chartData.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0.toFixed(1) || null,
            "v1": itm.v1.toFixed(1) || null,
            "v2": itm.v2.toFixed(1) || null,
            "v3": itm.v3.toFixed(1) || null,
            "v4": itm.v4.toFixed(1) || null,
            "v5": itm.v5.toFixed(1) || null,
            "v6": itm.v6.toFixed(1) || null,
            "v7": itm.v7.toFixed(1) || null
        });
    });
console.log("chartData", chartData);
    var chart = AmCharts.makeChart(test, {
    "type": "serial",
    "theme": "light",
    "marginRight": 80,
    "dataProvider": chartData,
    "valueAxes": [{
        "axisAlpha": 0.1
    }],
    "graphs": grphs,
    "zoomOutButtonRollOverAlpha": 0.15,
    "chartCursor": {
        "categoryBalloonDateFormat": "MMMM D L:NN A",
        "cursorPosition": "mouse",
        "showNextAvailable": true
    },
    "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
  "valueScrollbar":{
      "oppositeAxis":false,
      "offset":50,
      "scrollbarHeight":10
    },
    "autoMarginOffset": 5,
    "columnWidth": 1,
    "categoryField": "ts",
    "categoryAxis": {
        "parseDates": true,
        "minPeriod": "mm",
            "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
    }
    });
    console.log(chart);
    chart.addListener("rendered", zoomChart);
    
    zoomChart();
    
    function zoomChart() {
        chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
    }
});
}, 200);
});
});
  
this.ractive.on("day", function(event) {
 var showItem = model.queryAll('stackRactive');
  showItem.forEach(function(item){
    var dayID = template.view.querySelector("#day");
    var weekID = template.view.querySelector("#week");
    var monthID = template.view.querySelector("#month");
    var yearID = template.view.querySelector("#year");
    var test = template.view.querySelector("#zoomableValueAxis");
    dayID.style.backgroundColor = "#7093c1";
    weekID.style.backgroundColor = "#4f7ab3";
    monthID.style.backgroundColor = "#4f7ab3";
    yearID.style.backgroundColor = "#4f7ab3";
    var searchText = template.view.querySelector("#inputText").value;
    datePick = "today";
      setTimeout(function() {
          if(searchText===""){
                      var newQuery= template.dataQuery.replace(/(\.*\hisRead).*$/g,'.hisRead('+datePick+')');
    finstack.eval(newQuery, function(event){
    var cols = [];
    event.result.columns.forEach(function(itm){
        var t = /v\d+/.exec(itm.name);
        if(t !== null && t[0] == t.input){
            console.log("metadata", itm.metadata);
            if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, unit: itm.metadata.unit || null, equipRefDis: itm.metadata.equipRefDis});
            else cols.push({dis: itm.name, col: itm.name});
        }
    });
    console.log("cols",cols);
    
    var grphs = [];
    var cou = 0;
    cols.forEach(function(itm){
        grphs.push({
        "id": "g"+cou,
        "balloonText": ""+itm.equipRefDis+": [["+itm.col+"]] "+itm.unit+"",
        "lineThickness": 2,
        "title": itm.dis,
        "unit" : itm.unit,
        "valueField": itm.col,
        "fillAlphas": 0.2 //Area
        });
        cou++;
    });
console.log("grphs",grphs);
var myData = event.result.toObj();
console.log("myData", myData);
var chartData =[];
var myData2 = [];
    myData.forEach(function(itm){
        myData2.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0 || 0,
            "v1": itm.v1 || 0,
            "v2": itm.v2 || 0,
            "v3": itm.v3 || 0,
            "v4": itm.v4 || 0,
            "v5": itm.v5 || 0,
            "v6": itm.v6 || 0,
            "v7": itm.v7 || 0
        });
    });
    
    myData2.forEach(function(itm){
        chartData.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0.toFixed(1) || null,
            "v1": itm.v1.toFixed(1) || null,
            "v2": itm.v2.toFixed(1) || null,
            "v3": itm.v3.toFixed(1) || null,
            "v4": itm.v4.toFixed(1) || null,
            "v5": itm.v5.toFixed(1) || null,
            "v6": itm.v6.toFixed(1) || null,
            "v7": itm.v7.toFixed(1) || null
        });
    });
console.log("chartData", chartData);
    var chart = AmCharts.makeChart(test, {
    "type": "serial",
    "theme": "light",
    "marginRight": 80,
    "dataProvider": chartData,
    "valueAxes": [{
        "axisAlpha": 0.1
    }],
    "graphs": grphs,
    "zoomOutButtonRollOverAlpha": 0.15,
    "chartCursor": {
        "categoryBalloonDateFormat": "MMMM D L:NN A",
        "cursorPosition": "mouse",
        "showNextAvailable": true
    },
    "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
  "valueScrollbar":{
      "oppositeAxis":false,
      "offset":50,
      "scrollbarHeight":10
    },
    "autoMarginOffset": 5,
    "columnWidth": 1,
    "categoryField": "ts",
    "categoryAxis": {
        "parseDates": true,
        "minPeriod": "mm",
            "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
    }
    });
    console.log(chart);
    chart.addListener("rendered", zoomChart);
    
    zoomChart();
    
    function zoomChart() {
        chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
    }
}
          )}
        finstack.eval('readAll('+searchText+').hisRead('+datePick+')', function(event){
    var cols = [];
    event.result.columns.forEach(function(itm){
        var t = /v\d+/.exec(itm.name);
        if(t !== null && t[0] == t.input){
            console.log("metadata", itm.metadata);
            if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, unit: itm.metadata.unit || null, equipRefDis: itm.metadata.equipRefDis});
            else cols.push({dis: itm.name, col: itm.name});
        }
    });
    console.log("cols",cols);
    
    var grphs = [];
    var cou = 0;
    cols.forEach(function(itm){
        grphs.push({
        "id": "g"+cou,
        "balloonText": ""+itm.equipRefDis+": [["+itm.col+"]] "+itm.unit+"",
        "lineThickness": 2,
        "title": itm.dis,
        "unit" : itm.unit,
        "valueField": itm.col,
        "fillAlphas": 0.2 //Area
        });
        cou++;
    });
console.log("grphs",grphs);
var myData = event.result.toObj();
console.log("myData", myData);
var chartData =[];
var myData2 = [];
    myData.forEach(function(itm){
        myData2.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0 || 0,
            "v1": itm.v1 || 0,
            "v2": itm.v2 || 0,
            "v3": itm.v3 || 0,
            "v4": itm.v4 || 0,
            "v5": itm.v5 || 0,
            "v6": itm.v6 || 0,
            "v7": itm.v7 || 0
        });
    });
    
    myData2.forEach(function(itm){
        chartData.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0.toFixed(1) || null,
            "v1": itm.v1.toFixed(1) || null,
            "v2": itm.v2.toFixed(1) || null,
            "v3": itm.v3.toFixed(1) || null,
            "v4": itm.v4.toFixed(1) || null,
            "v5": itm.v5.toFixed(1) || null,
            "v6": itm.v6.toFixed(1) || null,
            "v7": itm.v7.toFixed(1) || null
        });
    });
console.log("chartData", chartData);
    var chart = AmCharts.makeChart(test, {
    "type": "serial",
    "theme": "light",
    "marginRight": 80,
    "dataProvider": chartData,
    "valueAxes": [{
        "axisAlpha": 0.1
    }],
    "graphs": grphs,
    "zoomOutButtonRollOverAlpha": 0.15,
    "chartCursor": {
        "categoryBalloonDateFormat": "MMMM D L:NN A",
        "cursorPosition": "mouse",
        "showNextAvailable": true
    },
    "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
  "valueScrollbar":{
      "oppositeAxis":false,
      "offset":50,
      "scrollbarHeight":10
    },
    "autoMarginOffset": 5,
    "columnWidth": 1,
    "categoryField": "ts",
    "categoryAxis": {
        "parseDates": true,
        "minPeriod": "mm",
            "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
    }
    });
    console.log(chart);
    chart.addListener("rendered", zoomChart);
    
    zoomChart();
    
    function zoomChart() {
        chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
    }
});
      }, 200);
  });
});
  
this.ractive.on("week", function(event) {
 var showItem = model.queryAll('stackRactive');
  showItem.forEach(function(item){
    var dayID = template.view.querySelector("#day");
    var weekID = template.view.querySelector("#week");
    var monthID = template.view.querySelector("#month");
    var yearID = template.view.querySelector("#year");
    var test = template.view.querySelector("#zoomableValueAxis");
    weekID.style.backgroundColor = "#7093c1";
    dayID.style.backgroundColor = "#4f7ab3";
    monthID.style.backgroundColor = "#4f7ab3";
    yearID.style.backgroundColor = "#4f7ab3";
    var searchText = template.view.querySelector("#inputText").value;
    datePick = "thisWeek";
      setTimeout(function() {
                  if(searchText===""){
                      var newQuery= template.dataQuery.replace(/(\.*\hisRead).*$/g,'.hisRead('+datePick+')');
    finstack.eval(newQuery, function(event){
    var cols = [];
    event.result.columns.forEach(function(itm){
        var t = /v\d+/.exec(itm.name);
        if(t !== null && t[0] == t.input){
            console.log("metadata", itm.metadata);
            if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, unit: itm.metadata.unit || null, equipRefDis: itm.metadata.equipRefDis});
            else cols.push({dis: itm.name, col: itm.name});
        }
    });
    console.log("cols",cols);
    
    var grphs = [];
    var cou = 0;
    cols.forEach(function(itm){
        grphs.push({
        "id": "g"+cou,
        "balloonText": ""+itm.equipRefDis+": [["+itm.col+"]] "+itm.unit+"",
        "lineThickness": 2,
        "title": itm.dis,
        "unit" : itm.unit,
        "valueField": itm.col,
        "fillAlphas": 0.2 //Area
        });
        cou++;
    });
console.log("grphs",grphs);
var myData = event.result.toObj();
console.log("myData", myData);
var chartData =[];
var myData2 = [];
    myData.forEach(function(itm){
        myData2.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0 || 0,
            "v1": itm.v1 || 0,
            "v2": itm.v2 || 0,
            "v3": itm.v3 || 0,
            "v4": itm.v4 || 0,
            "v5": itm.v5 || 0,
            "v6": itm.v6 || 0,
            "v7": itm.v7 || 0
        });
    });
    
    myData2.forEach(function(itm){
        chartData.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0.toFixed(1) || null,
            "v1": itm.v1.toFixed(1) || null,
            "v2": itm.v2.toFixed(1) || null,
            "v3": itm.v3.toFixed(1) || null,
            "v4": itm.v4.toFixed(1) || null,
            "v5": itm.v5.toFixed(1) || null,
            "v6": itm.v6.toFixed(1) || null,
            "v7": itm.v7.toFixed(1) || null
        });
    });
console.log("chartData", chartData);
    var chart = AmCharts.makeChart(test, {
    "type": "serial",
    "theme": "light",
    "marginRight": 80,
    "dataProvider": chartData,
    "valueAxes": [{
        "axisAlpha": 0.1
    }],
    "graphs": grphs,
    "zoomOutButtonRollOverAlpha": 0.15,
    "chartCursor": {
        "categoryBalloonDateFormat": "MMMM D L:NN A",
        "cursorPosition": "mouse",
        "showNextAvailable": true
    },
    "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
  "valueScrollbar":{
      "oppositeAxis":false,
      "offset":50,
      "scrollbarHeight":10
    },
    "autoMarginOffset": 5,
    "columnWidth": 1,
    "categoryField": "ts",
    "categoryAxis": {
        "parseDates": true,
        "minPeriod": "mm",
            "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
    }
    });
    console.log(chart);
    chart.addListener("rendered", zoomChart);
    
    zoomChart();
    
    function zoomChart() {
        chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
    }
}
          )}
finstack.eval('readAll('+searchText+').hisRead('+datePick+')', function(event){
    var cols = [];
    event.result.columns.forEach(function(itm){
        var t = /v\d+/.exec(itm.name);
        if(t !== null && t[0] == t.input){
            console.log("metadata", itm.metadata);
            if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, unit: itm.metadata.unit || null, equipRefDis: itm.metadata.equipRefDis});
            else cols.push({dis: itm.name, col: itm.name});
        }
    });
    console.log("cols",cols);
    
    var grphs = [];
    var cou = 0;
    cols.forEach(function(itm){
        grphs.push({
        "id": "g"+cou,
        "balloonText": ""+itm.equipRefDis+": [["+itm.col+"]] "+itm.unit+"",
        "lineThickness": 2,
        "title": itm.dis,
        "unit" : itm.unit,
        "valueField": itm.col,
        "fillAlphas": 0.2 //Area
        });
        cou++;
    });
console.log("grphs",grphs);
var myData = event.result.toObj();
console.log("myData", myData);
var chartData =[];
var myData2 = [];
    myData.forEach(function(itm){
        myData2.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0 || 0,
            "v1": itm.v1 || 0,
            "v2": itm.v2 || 0,
            "v3": itm.v3 || 0,
            "v4": itm.v4 || 0,
            "v5": itm.v5 || 0,
            "v6": itm.v6 || 0,
            "v7": itm.v7 || 0
        });
    });
    
    myData2.forEach(function(itm){
        chartData.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0.toFixed(1) || null,
            "v1": itm.v1.toFixed(1) || null,
            "v2": itm.v2.toFixed(1) || null,
            "v3": itm.v3.toFixed(1) || null,
            "v4": itm.v4.toFixed(1) || null,
            "v5": itm.v5.toFixed(1) || null,
            "v6": itm.v6.toFixed(1) || null,
            "v7": itm.v7.toFixed(1) || null
        });
    });
console.log("chartData", chartData);
    var chart = AmCharts.makeChart(test, {
    "type": "serial",
    "theme": "light",
    "marginRight": 80,
    "dataProvider": chartData,
    "valueAxes": [{
        "axisAlpha": 0.1
    }],
    "graphs": grphs,
    "zoomOutButtonRollOverAlpha": 0.15,
    "chartCursor": {
        "categoryBalloonDateFormat": "MMMM D L:NN A",
        "cursorPosition": "mouse",
        "showNextAvailable": true
    },
    "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
  "valueScrollbar":{
      "oppositeAxis":false,
      "offset":50,
      "scrollbarHeight":10
    },
    "autoMarginOffset": 5,
    "columnWidth": 1,
    "categoryField": "ts",
    "categoryAxis": {
        "parseDates": true,
        "minPeriod": "mm",
            "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
    }
    });
    console.log(chart);
    chart.addListener("rendered", zoomChart);
    
    zoomChart();
    
    function zoomChart() {
        chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
    }
});
      }, 200);
  });
});
  
this.ractive.on("month", function(event) {
 var showItem = model.queryAll('stackRactive');
  showItem.forEach(function(item){
    var dayID = template.view.querySelector("#day");
    var weekID = template.view.querySelector("#week");
    var monthID = template.view.querySelector("#month");
    var yearID = template.view.querySelector("#year");
    var test = template.view.querySelector("#zoomableValueAxis");
    monthID.style.backgroundColor = "#7093c1";
    weekID.style.backgroundColor = "#4f7ab3";
    dayID.style.backgroundColor = "#4f7ab3";
    yearID.style.backgroundColor = "#4f7ab3";
    var searchText = template.view.querySelector("#inputText").value;
    datePick = "thisMonth";
      setTimeout(function() {
          if(searchText===""){
                      var newQuery= template.dataQuery.replace(/(\.*\hisRead).*$/g,'.hisRead('+datePick+')');
    finstack.eval(newQuery, function(event){
    var cols = [];
    event.result.columns.forEach(function(itm){
        var t = /v\d+/.exec(itm.name);
        if(t !== null && t[0] == t.input){
            console.log("metadata", itm.metadata);
            if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, unit: itm.metadata.unit || null, equipRefDis: itm.metadata.equipRefDis});
            else cols.push({dis: itm.name, col: itm.name});
        }
    });
    console.log("cols",cols);
    
    var grphs = [];
    var cou = 0;
    cols.forEach(function(itm){
        grphs.push({
        "id": "g"+cou,
        "balloonText": ""+itm.equipRefDis+": [["+itm.col+"]] "+itm.unit+"",
        "lineThickness": 2,
        "title": itm.dis,
        "unit" : itm.unit,
        "valueField": itm.col,
        "fillAlphas": 0.2 //Area
        });
        cou++;
    });
console.log("grphs",grphs);
var myData = event.result.toObj();
console.log("myData", myData);
var chartData =[];
var myData2 = [];
    myData.forEach(function(itm){
        myData2.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0 || 0,
            "v1": itm.v1 || 0,
            "v2": itm.v2 || 0,
            "v3": itm.v3 || 0,
            "v4": itm.v4 || 0,
            "v5": itm.v5 || 0,
            "v6": itm.v6 || 0,
            "v7": itm.v7 || 0
        });
    });
    
    myData2.forEach(function(itm){
        chartData.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0.toFixed(1) || null,
            "v1": itm.v1.toFixed(1) || null,
            "v2": itm.v2.toFixed(1) || null,
            "v3": itm.v3.toFixed(1) || null,
            "v4": itm.v4.toFixed(1) || null,
            "v5": itm.v5.toFixed(1) || null,
            "v6": itm.v6.toFixed(1) || null,
            "v7": itm.v7.toFixed(1) || null
        });
    });
console.log("chartData", chartData);
    var chart = AmCharts.makeChart(test, {
    "type": "serial",
    "theme": "light",
    "marginRight": 80,
    "dataProvider": chartData,
    "valueAxes": [{
        "axisAlpha": 0.1
    }],
    "graphs": grphs,
    "zoomOutButtonRollOverAlpha": 0.15,
    "chartCursor": {
        "categoryBalloonDateFormat": "MMMM D L:NN A",
        "cursorPosition": "mouse",
        "showNextAvailable": true
    },
    "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
  "valueScrollbar":{
      "oppositeAxis":false,
      "offset":50,
      "scrollbarHeight":10
    },
    "autoMarginOffset": 5,
    "columnWidth": 1,
    "categoryField": "ts",
    "categoryAxis": {
        "parseDates": true,
        "minPeriod": "mm",
            "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
    }
    });
    console.log(chart);
    chart.addListener("rendered", zoomChart);
    
    zoomChart();
    
    function zoomChart() {
        chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
    }
}
          )}
        finstack.eval('readAll('+searchText+').hisRead('+datePick+')', function(event){
    var cols = [];
    event.result.columns.forEach(function(itm){
        var t = /v\d+/.exec(itm.name);
        if(t !== null && t[0] == t.input){
            console.log("metadata", itm.metadata);
            if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, unit: itm.metadata.unit || null, equipRefDis: itm.metadata.equipRefDis});
            else cols.push({dis: itm.name, col: itm.name});
        }
    });
    console.log("cols",cols);
    
    var grphs = [];
    var cou = 0;
    cols.forEach(function(itm){
        grphs.push({
        "id": "g"+cou,
        "balloonText": ""+itm.equipRefDis+": [["+itm.col+"]] "+itm.unit+"",
        "lineThickness": 2,
        "title": itm.dis,
        "unit" : itm.unit,
        "valueField": itm.col,
        "fillAlphas": 0.2 //Area
        });
        cou++;
    });
console.log("grphs",grphs);
var myData = event.result.toObj();
console.log("myData", myData);
var chartData =[];
var myData2 = [];
    myData.forEach(function(itm){
        myData2.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0 || 0,
            "v1": itm.v1 || 0,
            "v2": itm.v2 || 0,
            "v3": itm.v3 || 0,
            "v4": itm.v4 || 0,
            "v5": itm.v5 || 0,
            "v6": itm.v6 || 0,
            "v7": itm.v7 || 0
        });
    });
    
    myData2.forEach(function(itm){
        chartData.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0.toFixed(1) || null,
            "v1": itm.v1.toFixed(1) || null,
            "v2": itm.v2.toFixed(1) || null,
            "v3": itm.v3.toFixed(1) || null,
            "v4": itm.v4.toFixed(1) || null,
            "v5": itm.v5.toFixed(1) || null,
            "v6": itm.v6.toFixed(1) || null,
            "v7": itm.v7.toFixed(1) || null
        });
    });
console.log("chartData", chartData);
    var chart = AmCharts.makeChart(test, {
    "type": "serial",
    "theme": "light",
    "marginRight": 80,
    "dataProvider": chartData,
    "valueAxes": [{
        "axisAlpha": 0.1
    }],
    "graphs": grphs,
    "zoomOutButtonRollOverAlpha": 0.15,
    "chartCursor": {
        "categoryBalloonDateFormat": "MMMM D L:NN A",
        "cursorPosition": "mouse",
        "showNextAvailable": true
    },
    "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
  "valueScrollbar":{
      "oppositeAxis":false,
      "offset":50,
      "scrollbarHeight":10
    },
    "autoMarginOffset": 5,
    "columnWidth": 1,
    "categoryField": "ts",
    "categoryAxis": {
        "parseDates": true,
        "minPeriod": "mm",
            "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
    }
    });
    console.log(chart);
    chart.addListener("rendered", zoomChart);
    
    zoomChart();
    
    function zoomChart() {
        chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
    }
});
      }, 200);
  });
});
 
this.ractive.on("year", function(event){
    var showItem = model.queryAll('stackRactive');
    var searchText = "";
  showItem.forEach(function(item){
    var dayID = template.view.querySelector("#day");
    var weekID = template.view.querySelector("#week");
    var monthID = template.view.querySelector("#month");
    var yearID = template.view.querySelector("#year");
    var test = template.view.querySelector("#zoomableValueAxis");
    yearID.style.backgroundColor = "#7093c1";
    weekID.style.backgroundColor = "#4f7ab3";
    monthID.style.backgroundColor = "#4f7ab3";
    dayID.style.backgroundColor = "#4f7ab3";
    searchText = template.view.querySelector("#inputText").value;

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('MM/DD/YYYY');
     var dateStringEnd = end;
     var endDate = new moment(dateStringEnd).format('MM/DD/YYYY');
 
if (start==end){
      
      setTimeout(function() {
          if(searchText===""){
                      var newQuery= template.dataQuery.replace(/(\.*\hisRead).*$/g,'.hisRead('+start+')');
    finstack.eval(newQuery, function(event){
    var cols = [];
    event.result.columns.forEach(function(itm){
        var t = /v\d+/.exec(itm.name);
        if(t !== null && t[0] == t.input){
            console.log("metadata", itm.metadata);
            if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, unit: itm.metadata.unit || null, equipRefDis: itm.metadata.equipRefDis});
            else cols.push({dis: itm.name, col: itm.name});
        }
    });
    console.log("cols",cols);
    
    var grphs = [];
    var cou = 0;
    cols.forEach(function(itm){
        grphs.push({
        "id": "g"+cou,
        "balloonText": ""+itm.equipRefDis+": [["+itm.col+"]] "+itm.unit+"",
        "lineThickness": 2,
        "title": itm.dis,
        "unit" : itm.unit,
        "valueField": itm.col,
        "fillAlphas": 0.2 //Area
        });
        cou++;
    });
console.log("grphs",grphs);
var myData = event.result.toObj();
console.log("myData", myData);
var chartData =[];
var myData2 = [];
    myData.forEach(function(itm){
        myData2.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0 || 0,
            "v1": itm.v1 || 0,
            "v2": itm.v2 || 0,
            "v3": itm.v3 || 0,
            "v4": itm.v4 || 0,
            "v5": itm.v5 || 0,
            "v6": itm.v6 || 0,
            "v7": itm.v7 || 0
        });
    });
    
    myData2.forEach(function(itm){
        chartData.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0.toFixed(1) || null,
            "v1": itm.v1.toFixed(1) || null,
            "v2": itm.v2.toFixed(1) || null,
            "v3": itm.v3.toFixed(1) || null,
            "v4": itm.v4.toFixed(1) || null,
            "v5": itm.v5.toFixed(1) || null,
            "v6": itm.v6.toFixed(1) || null,
            "v7": itm.v7.toFixed(1) || null
        });
    });
console.log("chartData", chartData);
    var chart = AmCharts.makeChart(test, {
    "type": "serial",
    "theme": "light",
    "marginRight": 80,
    "dataProvider": chartData,
    "valueAxes": [{
        "axisAlpha": 0.1
    }],
    "graphs": grphs,
    "zoomOutButtonRollOverAlpha": 0.15,
    "chartCursor": {
        "categoryBalloonDateFormat": "MMMM D L:NN A",
        "cursorPosition": "mouse",
        "showNextAvailable": true
    },
    "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
  "valueScrollbar":{
      "oppositeAxis":false,
      "offset":50,
      "scrollbarHeight":10
    },
    "autoMarginOffset": 5,
    "columnWidth": 1,
    "categoryField": "ts",
    "categoryAxis": {
        "parseDates": true,
        "minPeriod": "mm",
            "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
    }
    });
    console.log(chart);
    chart.addListener("rendered", zoomChart);
    
    zoomChart();
    
    function zoomChart() {
        chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
    }
}
          )}
        finstack.eval('readAll('+searchText+').hisRead('+start+')', function(event){
    var cols = [];
    event.result.columns.forEach(function(itm){
        var t = /v\d+/.exec(itm.name);
        if(t !== null && t[0] == t.input){
            console.log("metadata", itm.metadata);
            if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, unit: itm.metadata.unit || null, equipRefDis: itm.metadata.equipRefDis});
            else cols.push({dis: itm.name, col: itm.name});
        }
    });
    console.log("cols",cols);
    
    var grphs = [];
    var cou = 0;
    cols.forEach(function(itm){
        grphs.push({
        "id": "g"+cou,
        "balloonText": ""+itm.equipRefDis+": [["+itm.col+"]] "+itm.unit+"",
        "lineThickness": 2,
        "title": itm.dis,
        "unit" : itm.unit,
        "valueField": itm.col,
        "fillAlphas": 0.2 //Area
        });
        cou++;
    });
console.log("grphs",grphs);
var myData = event.result.toObj();
console.log("myData", myData);
var chartData =[];
var myData2 = [];
    myData.forEach(function(itm){
        myData2.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0 || 0,
            "v1": itm.v1 || 0,
            "v2": itm.v2 || 0,
            "v3": itm.v3 || 0,
            "v4": itm.v4 || 0,
            "v5": itm.v5 || 0,
            "v6": itm.v6 || 0,
            "v7": itm.v7 || 0
        });
    });
    
    myData2.forEach(function(itm){
        chartData.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0.toFixed(1) || null,
            "v1": itm.v1.toFixed(1) || null,
            "v2": itm.v2.toFixed(1) || null,
            "v3": itm.v3.toFixed(1) || null,
            "v4": itm.v4.toFixed(1) || null,
            "v5": itm.v5.toFixed(1) || null,
            "v6": itm.v6.toFixed(1) || null,
            "v7": itm.v7.toFixed(1) || null
        });
    });
console.log("chartData", chartData);
    var chart = AmCharts.makeChart(test, {
    "type": "serial",
    "theme": "light",
    "marginRight": 80,
    "dataProvider": chartData,
    "valueAxes": [{
        "axisAlpha": 0.1
    }],
    "graphs": grphs,
    "zoomOutButtonRollOverAlpha": 0.15,
    "chartCursor": {
        "categoryBalloonDateFormat": "MMMM D L:NN A",
        "cursorPosition": "mouse",
        "showNextAvailable": true
    },
    "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
  "valueScrollbar":{
      "oppositeAxis":false,
      "offset":50,
      "scrollbarHeight":10
    },
    "autoMarginOffset": 5,
    "columnWidth": 1,
    "categoryField": "ts",
    "categoryAxis": {
        "parseDates": true,
        "minPeriod": "mm",
            "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
    }
    });
    console.log(chart);
    chart.addListener("rendered", zoomChart);
    
    zoomChart();
    
    function zoomChart() {
        chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
    }
});
      }, 200);
}else{
      setTimeout(function() {
          if(searchText===""){
                      var newQuery= template.dataQuery.replace(/(\.*\hisRead).*$/g,'.hisRead('+start+'..'+end+')');
    finstack.eval(newQuery, function(event){
    var cols = [];
    event.result.columns.forEach(function(itm){
        var t = /v\d+/.exec(itm.name);
        if(t !== null && t[0] == t.input){
            console.log("metadata", itm.metadata);
            if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, unit: itm.metadata.unit || null, equipRefDis: itm.metadata.equipRefDis});
            else cols.push({dis: itm.name, col: itm.name});
        }
    });
    console.log("cols",cols);
    
    var grphs = [];
    var cou = 0;
    cols.forEach(function(itm){
        grphs.push({
        "id": "g"+cou,
        "balloonText": ""+itm.equipRefDis+": [["+itm.col+"]] "+itm.unit+"",
        "lineThickness": 2,
        "title": itm.dis,
        "unit" : itm.unit,
        "valueField": itm.col,
        "fillAlphas": 0.2 //Area
        });
        cou++;
    });
console.log("grphs",grphs);
var myData = event.result.toObj();
console.log("myData", myData);
var chartData =[];
var myData2 = [];
    myData.forEach(function(itm){
        myData2.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0 || 0,
            "v1": itm.v1 || 0,
            "v2": itm.v2 || 0,
            "v3": itm.v3 || 0,
            "v4": itm.v4 || 0,
            "v5": itm.v5 || 0,
            "v6": itm.v6 || 0,
            "v7": itm.v7 || 0
        });
    });
    
    myData2.forEach(function(itm){
        chartData.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0.toFixed(1) || null,
            "v1": itm.v1.toFixed(1) || null,
            "v2": itm.v2.toFixed(1) || null,
            "v3": itm.v3.toFixed(1) || null,
            "v4": itm.v4.toFixed(1) || null,
            "v5": itm.v5.toFixed(1) || null,
            "v6": itm.v6.toFixed(1) || null,
            "v7": itm.v7.toFixed(1) || null
        });
    });
console.log("chartData", chartData);
    var chart = AmCharts.makeChart(test, {
    "type": "serial",
    "theme": "light",
    "marginRight": 80,
    "dataProvider": chartData,
    "valueAxes": [{
        "axisAlpha": 0.1
    }],
    "graphs": grphs,
    "zoomOutButtonRollOverAlpha": 0.15,
    "chartCursor": {
        "categoryBalloonDateFormat": "MMMM D L:NN A",
        "cursorPosition": "mouse",
        "showNextAvailable": true
    },
    "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
  "valueScrollbar":{
      "oppositeAxis":false,
      "offset":50,
      "scrollbarHeight":10
    },
    "autoMarginOffset": 5,
    "columnWidth": 1,
    "categoryField": "ts",
    "categoryAxis": {
        "parseDates": true,
        "minPeriod": "mm",
            "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
    }
    });
    console.log(chart);
    chart.addListener("rendered", zoomChart);
    
    zoomChart();
    
    function zoomChart() {
        chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
    }
}
          )}
          finstack.eval('readAll('+searchText+').hisRead('+start+'..'+end+')', function(event){
    var cols = [];
    event.result.columns.forEach(function(itm){
        var t = /v\d+/.exec(itm.name);
        if(t !== null && t[0] == t.input){
            console.log("metadata", itm.metadata);
            if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, unit: itm.metadata.unit || null, equipRefDis: itm.metadata.equipRefDis});
            else cols.push({dis: itm.name, col: itm.name});
        }
    });
    console.log("cols",cols);
    
    var grphs = [];
    var cou = 0;
    cols.forEach(function(itm){
        grphs.push({
        "id": "g"+cou,
        "balloonText": ""+itm.equipRefDis+": [["+itm.col+"]] "+itm.unit+"",
        "lineThickness": 2,
        "title": itm.dis,
        "unit" : itm.unit,
        "valueField": itm.col,
        "fillAlphas": 0.2 //Area
        });
        cou++;
    });
console.log("grphs",grphs);
var myData = event.result.toObj();
console.log("myData", myData);
var chartData =[];
var myData2 = [];
    myData.forEach(function(itm){
        myData2.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0 || 0,
            "v1": itm.v1 || 0,
            "v2": itm.v2 || 0,
            "v3": itm.v3 || 0,
            "v4": itm.v4 || 0,
            "v5": itm.v5 || 0,
            "v6": itm.v6 || 0,
            "v7": itm.v7 || 0
        });
    });
    
    myData2.forEach(function(itm){
        chartData.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0.toFixed(1) || null,
            "v1": itm.v1.toFixed(1) || null,
            "v2": itm.v2.toFixed(1) || null,
            "v3": itm.v3.toFixed(1) || null,
            "v4": itm.v4.toFixed(1) || null,
            "v5": itm.v5.toFixed(1) || null,
            "v6": itm.v6.toFixed(1) || null,
            "v7": itm.v7.toFixed(1) || null
        });
    });
console.log("chartData", chartData);
    var chart = AmCharts.makeChart(test, {
    "type": "serial",
    "theme": "light",
    "marginRight": 80,
    "dataProvider": chartData,
    "valueAxes": [{
        "axisAlpha": 0.1
    }],
    "graphs": grphs,
    "zoomOutButtonRollOverAlpha": 0.15,
    "chartCursor": {
        "categoryBalloonDateFormat": "MMMM D L:NN A",
        "cursorPosition": "mouse",
        "showNextAvailable": true
    },
    "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
  "valueScrollbar":{
      "oppositeAxis":false,
      "offset":50,
      "scrollbarHeight":10
    },
    "autoMarginOffset": 5,
    "columnWidth": 1,
    "categoryField": "ts",
    "categoryAxis": {
        "parseDates": true,
        "minPeriod": "mm",
            "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
    }
    });
    console.log(chart);
    chart.addListener("rendered", zoomChart);
    
    zoomChart();
    
    function zoomChart() {
        chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
    }
});
      }, 200);
}
      model.set('myStart', startDate);
      model.set('myEnd', endDate);
     },
    {periods:true});
});
  });

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 hover over "this"
Turn on Invokes the Function
Change the dropdown to Custom Event
In the textbox 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 template = this;
var test = template.view.querySelector("#zoomableValueAxis");
finstack.eval(this.dataQuery, function(event){
    var cols = [];
    event.result.columns.forEach(function(itm){
        var t = /v\d+/.exec(itm.name);
        if(t !== null && t[0] == t.input){
            console.log("metadata", itm.metadata);
            if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, unit: itm.metadata.unit || null, equipRefDis: itm.metadata.equipRefDis});
            else cols.push({dis: itm.name, col: itm.name});
        }
    });
    
    var grphs = [];
    var cou = 0;
    cols.forEach(function(itm){
        grphs.push({
        "id": "g"+cou,
        "balloonText": ""+itm.equipRefDis+": [["+itm.col+"]] "+itm.unit+"",
        "lineThickness": 2,
        "title": itm.dis,
        "unit" : itm.unit,
        "valueField": itm.col,
        "fillAlphas": 0.2 //Area
        });
        cou++;
    });
var myData = event.result.toObj();
var chartData =[];
var myData2 = [];
    myData.forEach(function(itm){
        myData2.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0 || 0,
            "v1": itm.v1 || 0,
            "v2": itm.v2 || 0,
            "v3": itm.v3 || 0,
            "v4": itm.v4 || 0,
            "v5": itm.v5 || 0,
            "v6": itm.v6 || 0,
            "v7": itm.v7 || 0
        });
    });
    
    myData2.forEach(function(itm){
        chartData.push({
            "ts": itm.ts,
            "tsOffset": itm.tsOffset,
            "tsTimezone": itm.tsTimezone,
            "v0": itm.v0.toFixed(1) || null,
            "v1": itm.v1.toFixed(1) || null,
            "v2": itm.v2.toFixed(1) || null,
            "v3": itm.v3.toFixed(1) || null,
            "v4": itm.v4.toFixed(1) || null,
            "v5": itm.v5.toFixed(1) || null,
            "v6": itm.v6.toFixed(1) || null,
            "v7": itm.v7.toFixed(1) || null
        });
    });
console.log("chartData", chartData);
    var chart = AmCharts.makeChart(test, {
    "type": "serial",
    "theme": "light",
    "marginRight": 80,
    "dataProvider": chartData,
    "valueAxes": [{
        "axisAlpha": 0.1
    }],
    "graphs": grphs,
    "zoomOutButtonRollOverAlpha": 0.15,
    "chartCursor": {
        "categoryBalloonDateFormat": "MMMM D L:NN A",
        "cursorPosition": "mouse",
        "showNextAvailable": true
    },
    "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
  "valueScrollbar":{
      "oppositeAxis":false,
      "offset":50,
      "scrollbarHeight":10
    },
    "autoMarginOffset": 5,
    "columnWidth": 1,
    "categoryField": "ts",
    "categoryAxis": {
        "parseDates": true,
        "minPeriod": "mm",
            "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
    }
    });
    chart.addListener("rendered", zoomChart);
    
    zoomChart();
    
    function zoomChart() {
        chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
    }
});

Startup Data

To add the data for the query, add a tag on the group called dataQuery
Set the value equal to what you would like the query to be
This is found under the properties menu with the Group selected under the advanced tab

History Chart Box Toggle