Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

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: HistoryChart_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");

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){
            if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, 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,
            "balloon":{
              "drop":true,
              "adjustBorderColor":false,
              "color":"#ffffff"
            },
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "fillAlphas": 0.2,//fill
            "title": itm.dis,
            "useLineColorForBulletBorder": true,
            "valueField": itm.col,
            "balloonText": "<span style='font-size:10px;'>[["+itm.col+"]]<br>"+itm.equipRefDis+"</span>"
        });
        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
        });
    });
    var chart = AmCharts.makeChart(test, {
        "type": "serial",
        "theme": "light",
        "marginRight": 40,
        "marginLeft": 40,
        "autoMarginOffset": 20,
        "mouseWheelZoomEnabled":true,
        "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
        "valueAxes": [{
            "id": "v1",
            "axisAlpha": 0,
            "position": "left",
            "ignoreAxisWidth":true
        }],
        "balloon": {
            "borderThickness": 1,
            "shadowAlpha": 0
        },
        "graphs": grphs,
        "chartScrollbar": {
            "graph": "g1",
            "oppositeAxis":false,
            "offset":30,
            "scrollbarHeight": 80,
            "backgroundAlpha": 0,
            "selectedBackgroundAlpha": 0.1,
            "selectedBackgroundColor": "#888888",
            "graphFillAlpha": 0,
            "graphLineAlpha": 0.5,
            "selectedGraphFillAlpha": 0,
            "selectedGraphLineAlpha": 1,
            "autoGridCount":true,
            "color":"#AAAAAA"
        },
        "chartCursor": {
            "pan": true,
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "cursorAlpha":1,
            "cursorColor":"#258cbb",
            "limitToGraph":"g1",
            "valueLineAlpha":0.2,
            "valueZoomable":true
        },
        "valueScrollbar":{
          "oppositeAxis":false,
          "offset":50,
          "scrollbarHeight":10
        },
        "categoryField": "ts",
        "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
    "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
        },
        "dataProvider": chartData
    });
    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){
            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,
            "balloon":{
              "drop":true,
              "adjustBorderColor":false,
              "color":"#ffffff"
            },
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "fillAlphas": 0.2,//fill
            "title": itm.dis,
            "unit" : itm.unit,
            "useLineColorForBulletBorder": true,
            "valueField": itm.col,
            "balloonText": "<span style='font-size:10px;'>[["+itm.col+"]] "+itm.unit+"<br>"+itm.equipRefDis+"</span>"
        });
        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
        });
    });
    var chart = AmCharts.makeChart(test, {
        "type": "serial",
        "theme": "light",
        "marginRight": 40,
        "marginLeft": 40,
        "autoMarginOffset": 20,
        "mouseWheelZoomEnabled":true,
        "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
        "valueAxes": [{
            "id": "v1",
            "axisAlpha": 0,
            "unit" : grphs[0].unit,
            "unitPosition" : "right",
            "position": "left",
            "ignoreAxisWidth":true
        }],
        "balloon": {
            "borderThickness": 1,
            "shadowAlpha": 0
        },
        "graphs": grphs,
        "chartScrollbar": {
            "graph": "g1",
            "oppositeAxis":false,
            "offset":30,
            "scrollbarHeight": 80,
            "backgroundAlpha": 0,
            "selectedBackgroundAlpha": 0.1,
            "selectedBackgroundColor": "#888888",
            "graphFillAlpha": 0,
            "graphLineAlpha": 0.5,
            "selectedGraphFillAlpha": 0,
            "selectedGraphLineAlpha": 1,
            "autoGridCount":true,
            "color":"#AAAAAA"
        },
        "chartCursor": {
            "pan": true,
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "cursorAlpha":1,
            "cursorColor":"#258cbb",
            "limitToGraph":"g1",
            "valueLineAlpha":0.2,
            "valueZoomable":true
        },
        "valueScrollbar":{
          "oppositeAxis":false,
          "offset":50,
          "scrollbarHeight":10
        },
        "categoryField": "ts",
        "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
    "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
        },
        "dataProvider": chartData
    });
    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){
            if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, 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,
            "balloon":{
              "drop":true,
              "adjustBorderColor":false,
              "color":"#ffffff"
            },
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "fillAlphas": 0.2,//fill
            "title": itm.dis,
            "useLineColorForBulletBorder": true,
            "valueField": itm.col,
            "balloonText": "<span style='font-size:10px;'>[["+itm.col+"]]<br>"+itm.equipRefDis+"</span>"
        });
        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
        });
    });
    var chart = AmCharts.makeChart(test, {
        "type": "serial",
        "theme": "light",
        "marginRight": 40,
        "marginLeft": 40,
        "autoMarginOffset": 20,
        "mouseWheelZoomEnabled":true,
        "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
        "valueAxes": [{
            "id": "v1",
            "axisAlpha": 0,
            "position": "left",
            "ignoreAxisWidth":true
        }],
        "balloon": {
            "borderThickness": 1,
            "shadowAlpha": 0
        },
        "graphs": grphs,
        "chartScrollbar": {
            "graph": "g1",
            "oppositeAxis":false,
            "offset":30,
            "scrollbarHeight": 80,
            "backgroundAlpha": 0,
            "selectedBackgroundAlpha": 0.1,
            "selectedBackgroundColor": "#888888",
            "graphFillAlpha": 0,
            "graphLineAlpha": 0.5,
            "selectedGraphFillAlpha": 0,
            "selectedGraphLineAlpha": 1,
            "autoGridCount":true,
            "color":"#AAAAAA"
        },
        "chartCursor": {
            "pan": true,
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "cursorAlpha":1,
            "cursorColor":"#258cbb",
            "limitToGraph":"g1",
            "valueLineAlpha":0.2,
            "valueZoomable":true
        },
        "valueScrollbar":{
          "oppositeAxis":false,
          "offset":50,
          "scrollbarHeight":10
        },
        "categoryField": "ts",
        "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
    "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
        },
        "dataProvider": chartData
    });
    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){
            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,
            "balloon":{
              "drop":true,
              "adjustBorderColor":false,
              "color":"#ffffff"
            },
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "fillAlphas": 0.2,//fill
            "title": itm.dis,
            "unit" : itm.unit,
            "useLineColorForBulletBorder": true,
            "valueField": itm.col,
            "balloonText": "<span style='font-size:10px;'>[["+itm.col+"]] "+itm.unit+"<br>"+itm.equipRefDis+"</span>"
        });
        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
        });
    });
    var chart = AmCharts.makeChart(test, {
        "type": "serial",
        "theme": "light",
        "marginRight": 40,
        "marginLeft": 40,
        "autoMarginOffset": 20,
        "mouseWheelZoomEnabled":true,
        "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
        "valueAxes": [{
            "id": "v1",
            "axisAlpha": 0,
            "unit" : grphs[0].unit,
            "unitPosition" : "right",
            "position": "left",
            "ignoreAxisWidth":true
        }],
        "balloon": {
            "borderThickness": 1,
            "shadowAlpha": 0
        },
        "graphs": grphs,
        "chartScrollbar": {
            "graph": "g1",
            "oppositeAxis":false,
            "offset":30,
            "scrollbarHeight": 80,
            "backgroundAlpha": 0,
            "selectedBackgroundAlpha": 0.1,
            "selectedBackgroundColor": "#888888",
            "graphFillAlpha": 0,
            "graphLineAlpha": 0.5,
            "selectedGraphFillAlpha": 0,
            "selectedGraphLineAlpha": 1,
            "autoGridCount":true,
            "color":"#AAAAAA"
        },
        "chartCursor": {
            "pan": true,
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "cursorAlpha":1,
            "cursorColor":"#258cbb",
            "limitToGraph":"g1",
            "valueLineAlpha":0.2,
            "valueZoomable":true
        },
        "valueScrollbar":{
          "oppositeAxis":false,
          "offset":50,
          "scrollbarHeight":10
        },
        "categoryField": "ts",
        "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
    "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
        },
        "dataProvider": chartData
    });
    chart.addListener("rendered", zoomChart);
    
    zoomChart();
    
    function zoomChart() {
        chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
    }
          model.set('myStart', 'Date Picker');
          model.set('myEnd', "Date Picker");
        });
      }, 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){
            if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, 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,
            "balloon":{
              "drop":true,
              "adjustBorderColor":false,
              "color":"#ffffff"
            },
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "fillAlphas": 0.2,//fill
            "title": itm.dis,
            "useLineColorForBulletBorder": true,
            "valueField": itm.col,
            "balloonText": "<span style='font-size:10px;'>[["+itm.col+"]]<br>"+itm.equipRefDis+"</span>"
        });
        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
        });
    });
    var chart = AmCharts.makeChart(test, {
        "type": "serial",
        "theme": "light",
        "marginRight": 40,
        "marginLeft": 40,
        "autoMarginOffset": 20,
        "mouseWheelZoomEnabled":true,
        "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
        "valueAxes": [{
            "id": "v1",
            "axisAlpha": 0,
            "position": "left",
            "ignoreAxisWidth":true
        }],
        "balloon": {
            "borderThickness": 1,
            "shadowAlpha": 0
        },
        "graphs": grphs,
        "chartScrollbar": {
            "graph": "g1",
            "oppositeAxis":false,
            "offset":30,
            "scrollbarHeight": 80,
            "backgroundAlpha": 0,
            "selectedBackgroundAlpha": 0.1,
            "selectedBackgroundColor": "#888888",
            "graphFillAlpha": 0,
            "graphLineAlpha": 0.5,
            "selectedGraphFillAlpha": 0,
            "selectedGraphLineAlpha": 1,
            "autoGridCount":true,
            "color":"#AAAAAA"
        },
        "chartCursor": {
            "pan": true,
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "cursorAlpha":1,
            "cursorColor":"#258cbb",
            "limitToGraph":"g1",
            "valueLineAlpha":0.2,
            "valueZoomable":true
        },
        "valueScrollbar":{
          "oppositeAxis":false,
          "offset":50,
          "scrollbarHeight":10
        },
        "categoryField": "ts",
        "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
    "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
        },
        "dataProvider": chartData
    });
    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){
            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,
            "balloon":{
              "drop":true,
              "adjustBorderColor":false,
              "color":"#ffffff"
            },
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "fillAlphas": 0.2,//fill
            "title": itm.dis,
            "unit" : itm.unit,
            "useLineColorForBulletBorder": true,
            "valueField": itm.col,
            "balloonText": "<span style='font-size:10px;'>[["+itm.col+"]] "+itm.unit+"<br>"+itm.equipRefDis+"</span>"
        });
        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
        });
    });
    var chart = AmCharts.makeChart(test, {
        "type": "serial",
        "theme": "light",
        "marginRight": 40,
        "marginLeft": 40,
        "autoMarginOffset": 20,
        "mouseWheelZoomEnabled":true,
        "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
        "valueAxes": [{
            "id": "v1",
            "axisAlpha": 0,
            "unit" : grphs[0].unit,
            "unitPosition" : "right",
            "position": "left",
            "ignoreAxisWidth":true
        }],
        "balloon": {
            "borderThickness": 1,
            "shadowAlpha": 0
        },
        "graphs": grphs,
        "chartScrollbar": {
            "graph": "g1",
            "oppositeAxis":false,
            "offset":30,
            "scrollbarHeight": 80,
            "backgroundAlpha": 0,
            "selectedBackgroundAlpha": 0.1,
            "selectedBackgroundColor": "#888888",
            "graphFillAlpha": 0,
            "graphLineAlpha": 0.5,
            "selectedGraphFillAlpha": 0,
            "selectedGraphLineAlpha": 1,
            "autoGridCount":true,
            "color":"#AAAAAA"
        },
        "chartCursor": {
            "pan": true,
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "cursorAlpha":1,
            "cursorColor":"#258cbb",
            "limitToGraph":"g1",
            "valueLineAlpha":0.2,
            "valueZoomable":true
        },
        "valueScrollbar":{
          "oppositeAxis":false,
          "offset":50,
          "scrollbarHeight":10
        },
        "categoryField": "ts",
        "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
    "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
        },
        "dataProvider": chartData
    });
    chart.addListener("rendered", zoomChart);
    
    zoomChart();
    
    function zoomChart() {
        chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
    }
          model.set('myStart', 'Date Picker');
          model.set('myEnd', "Date Picker");
        });
      }, 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){
            if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, 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,
            "balloon":{
              "drop":true,
              "adjustBorderColor":false,
              "color":"#ffffff"
            },
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "fillAlphas": 0.2,//fill
            "title": itm.dis,
            "useLineColorForBulletBorder": true,
            "valueField": itm.col,
            "balloonText": "<span style='font-size:10px;'>[["+itm.col+"]]<br>"+itm.equipRefDis+"</span>"
        });
        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
        });
    });
    var chart = AmCharts.makeChart(test, {
        "type": "serial",
        "theme": "light",
        "marginRight": 40,
        "marginLeft": 40,
        "autoMarginOffset": 20,
        "mouseWheelZoomEnabled":true,
        "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
        "valueAxes": [{
            "id": "v1",
            "axisAlpha": 0,
            "position": "left",
            "ignoreAxisWidth":true
        }],
        "balloon": {
            "borderThickness": 1,
            "shadowAlpha": 0
        },
        "graphs": grphs,
        "chartScrollbar": {
            "graph": "g1",
            "oppositeAxis":false,
            "offset":30,
            "scrollbarHeight": 80,
            "backgroundAlpha": 0,
            "selectedBackgroundAlpha": 0.1,
            "selectedBackgroundColor": "#888888",
            "graphFillAlpha": 0,
            "graphLineAlpha": 0.5,
            "selectedGraphFillAlpha": 0,
            "selectedGraphLineAlpha": 1,
            "autoGridCount":true,
            "color":"#AAAAAA"
        },
        "chartCursor": {
            "pan": true,
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "cursorAlpha":1,
            "cursorColor":"#258cbb",
            "limitToGraph":"g1",
            "valueLineAlpha":0.2,
            "valueZoomable":true
        },
        "valueScrollbar":{
          "oppositeAxis":false,
          "offset":50,
          "scrollbarHeight":10
        },
        "categoryField": "ts",
        "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
    "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
        },
        "dataProvider": chartData
    });
    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){
            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,
            "balloon":{
              "drop":true,
              "adjustBorderColor":false,
              "color":"#ffffff"
            },
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "fillAlphas": 0.2,//fill
            "title": itm.dis,
            "unit" : itm.unit,
            "useLineColorForBulletBorder": true,
            "valueField": itm.col,
            "balloonText": "<span style='font-size:10px;'>[["+itm.col+"]] "+itm.unit+"<br>"+itm.equipRefDis+"</span>"
        });
        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
        });
    });
    var chart = AmCharts.makeChart(test, {
        "type": "serial",
        "theme": "light",
        "marginRight": 40,
        "marginLeft": 40,
        "autoMarginOffset": 20,
        "mouseWheelZoomEnabled":true,
        "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
        "valueAxes": [{
            "id": "v1",
            "axisAlpha": 0,
            "unit" : grphs[0].unit,
            "unitPosition" : "right",
            "position": "left",
            "ignoreAxisWidth":true
        }],
        "balloon": {
            "borderThickness": 1,
            "shadowAlpha": 0
        },
        "graphs": grphs,
        "chartScrollbar": {
            "graph": "g1",
            "oppositeAxis":false,
            "offset":30,
            "scrollbarHeight": 80,
            "backgroundAlpha": 0,
            "selectedBackgroundAlpha": 0.1,
            "selectedBackgroundColor": "#888888",
            "graphFillAlpha": 0,
            "graphLineAlpha": 0.5,
            "selectedGraphFillAlpha": 0,
            "selectedGraphLineAlpha": 1,
            "autoGridCount":true,
            "color":"#AAAAAA"
        },
        "chartCursor": {
            "pan": true,
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "cursorAlpha":1,
            "cursorColor":"#258cbb",
            "limitToGraph":"g1",
            "valueLineAlpha":0.2,
            "valueZoomable":true
        },
        "valueScrollbar":{
          "oppositeAxis":false,
          "offset":50,
          "scrollbarHeight":10
        },
        "categoryField": "ts",
        "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
    "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
        },
        "dataProvider": chartData
    });
    chart.addListener("rendered", zoomChart);
    
    zoomChart();
    
    function zoomChart() {
        chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
    }

          model.set('myStart', 'Date Picker');
          model.set('myEnd', "Date Picker");
        });
      }, 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){
            if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, 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,
            "balloon":{
              "drop":true,
              "adjustBorderColor":false,
              "color":"#ffffff"
            },
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "fillAlphas": 0.2,//fill
            "title": itm.dis,
            "useLineColorForBulletBorder": true,
            "valueField": itm.col,
            "balloonText": "<span style='font-size:10px;'>[["+itm.col+"]]<br>"+itm.equipRefDis+"</span>"
        });
        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
        });
    });
    var chart = AmCharts.makeChart(test, {
        "type": "serial",
        "theme": "light",
        "marginRight": 40,
        "marginLeft": 40,
        "autoMarginOffset": 20,
        "mouseWheelZoomEnabled":true,
        "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
        "valueAxes": [{
            "id": "v1",
            "axisAlpha": 0,
            "position": "left",
            "ignoreAxisWidth":true
        }],
        "balloon": {
            "borderThickness": 1,
            "shadowAlpha": 0
        },
        "graphs": grphs,
        "chartScrollbar": {
            "graph": "g1",
            "oppositeAxis":false,
            "offset":30,
            "scrollbarHeight": 80,
            "backgroundAlpha": 0,
            "selectedBackgroundAlpha": 0.1,
            "selectedBackgroundColor": "#888888",
            "graphFillAlpha": 0,
            "graphLineAlpha": 0.5,
            "selectedGraphFillAlpha": 0,
            "selectedGraphLineAlpha": 1,
            "autoGridCount":true,
            "color":"#AAAAAA"
        },
        "chartCursor": {
            "pan": true,
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "cursorAlpha":1,
            "cursorColor":"#258cbb",
            "limitToGraph":"g1",
            "valueLineAlpha":0.2,
            "valueZoomable":true
        },
        "valueScrollbar":{
          "oppositeAxis":false,
          "offset":50,
          "scrollbarHeight":10
        },
        "categoryField": "ts",
        "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
    "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
        },
        "dataProvider": chartData
    });
    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){
            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,
            "balloon":{
              "drop":true,
              "adjustBorderColor":false,
              "color":"#ffffff"
            },
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "fillAlphas": 0.2,//fill
            "title": itm.dis,
            "unit" : itm.unit,
            "useLineColorForBulletBorder": true,
            "valueField": itm.col,
            "balloonText": "<span style='font-size:10px;'>[["+itm.col+"]] "+itm.unit+"<br>"+itm.equipRefDis+"</span>"
        });
        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
        });
    });
    var chart = AmCharts.makeChart(test, {
        "type": "serial",
        "theme": "light",
        "marginRight": 40,
        "marginLeft": 40,
        "autoMarginOffset": 20,
        "mouseWheelZoomEnabled":true,
        "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
        "valueAxes": [{
            "id": "v1",
            "axisAlpha": 0,
            "unit" : grphs[0].unit,
            "unitPosition" : "right",
            "position": "left",
            "ignoreAxisWidth":true
        }],
        "balloon": {
            "borderThickness": 1,
            "shadowAlpha": 0
        },
        "graphs": grphs,
        "chartScrollbar": {
            "graph": "g1",
            "oppositeAxis":false,
            "offset":30,
            "scrollbarHeight": 80,
            "backgroundAlpha": 0,
            "selectedBackgroundAlpha": 0.1,
            "selectedBackgroundColor": "#888888",
            "graphFillAlpha": 0,
            "graphLineAlpha": 0.5,
            "selectedGraphFillAlpha": 0,
            "selectedGraphLineAlpha": 1,
            "autoGridCount":true,
            "color":"#AAAAAA"
        },
        "chartCursor": {
            "pan": true,
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "cursorAlpha":1,
            "cursorColor":"#258cbb",
            "limitToGraph":"g1",
            "valueLineAlpha":0.2,
            "valueZoomable":true
        },
        "valueScrollbar":{
          "oppositeAxis":false,
          "offset":50,
          "scrollbarHeight":10
        },
        "categoryField": "ts",
        "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
    "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
        },
        "dataProvider": chartData
    });
    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){
            if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, 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,
            "balloon":{
              "drop":true,
              "adjustBorderColor":false,
              "color":"#ffffff"
            },
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "fillAlphas": 0.2,//fill
            "title": itm.dis,
            "useLineColorForBulletBorder": true,
            "valueField": itm.col,
            "balloonText": "<span style='font-size:10px;'>[["+itm.col+"]]<br>"+itm.equipRefDis+"</span>"
        });
        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
        });
    });
    var chart = AmCharts.makeChart(test, {
        "type": "serial",
        "theme": "light",
        "marginRight": 40,
        "marginLeft": 40,
        "autoMarginOffset": 20,
        "mouseWheelZoomEnabled":true,
        "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
        "valueAxes": [{
            "id": "v1",
            "axisAlpha": 0,
            "position": "left",
            "ignoreAxisWidth":true
        }],
        "balloon": {
            "borderThickness": 1,
            "shadowAlpha": 0
        },
        "graphs": grphs,
        "chartScrollbar": {
            "graph": "g1",
            "oppositeAxis":false,
            "offset":30,
            "scrollbarHeight": 80,
            "backgroundAlpha": 0,
            "selectedBackgroundAlpha": 0.1,
            "selectedBackgroundColor": "#888888",
            "graphFillAlpha": 0,
            "graphLineAlpha": 0.5,
            "selectedGraphFillAlpha": 0,
            "selectedGraphLineAlpha": 1,
            "autoGridCount":true,
            "color":"#AAAAAA"
        },
        "chartCursor": {
            "pan": true,
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "cursorAlpha":1,
            "cursorColor":"#258cbb",
            "limitToGraph":"g1",
            "valueLineAlpha":0.2,
            "valueZoomable":true
        },
        "valueScrollbar":{
          "oppositeAxis":false,
          "offset":50,
          "scrollbarHeight":10
        },
        "categoryField": "ts",
        "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
    "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
        },
        "dataProvider": chartData
    });
    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){
            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,
            "balloon":{
              "drop":true,
              "adjustBorderColor":false,
              "color":"#ffffff"
            },
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "fillAlphas": 0.2,//fill
            "title": itm.dis,
            "unit" : itm.unit,
            "useLineColorForBulletBorder": true,
            "valueField": itm.col,
            "balloonText": "<span style='font-size:10px;'>[["+itm.col+"]] "+itm.unit+"<br>"+itm.equipRefDis+"</span>"
        });
        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
        });
    });
    var chart = AmCharts.makeChart(test, {
        "type": "serial",
        "theme": "light",
        "marginRight": 40,
        "marginLeft": 40,
        "autoMarginOffset": 20,
        "mouseWheelZoomEnabled":true,
        "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
        "valueAxes": [{
            "id": "v1",
            "axisAlpha": 0,
            "unit" : grphs[0].unit,
            "unitPosition" : "right",
            "position": "left",
            "ignoreAxisWidth":true
        }],
        "balloon": {
            "borderThickness": 1,
            "shadowAlpha": 0
        },
        "graphs": grphs,
        "chartScrollbar": {
            "graph": "g1",
            "oppositeAxis":false,
            "offset":30,
            "scrollbarHeight": 80,
            "backgroundAlpha": 0,
            "selectedBackgroundAlpha": 0.1,
            "selectedBackgroundColor": "#888888",
            "graphFillAlpha": 0,
            "graphLineAlpha": 0.5,
            "selectedGraphFillAlpha": 0,
            "selectedGraphLineAlpha": 1,
            "autoGridCount":true,
            "color":"#AAAAAA"
        },
        "chartCursor": {
            "pan": true,
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "cursorAlpha":1,
            "cursorColor":"#258cbb",
            "limitToGraph":"g1",
            "valueLineAlpha":0.2,
            "valueZoomable":true
        },
        "valueScrollbar":{
          "oppositeAxis":false,
          "offset":50,
          "scrollbarHeight":10
        },
        "categoryField": "ts",
        "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
    "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
        },
        "dataProvider": chartData
    });
    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){
            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,
            "balloon":{
              "drop":true,
              "adjustBorderColor":false,
              "color":"#ffffff"
            },
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "bulletColor": "#FFFFFF",
            "bulletSize": 5,
            "hideBulletsCount": 50,
            "lineThickness": 2,
            "fillAlphas": 0.2,//fill
            "title": itm.dis,
            "unit" : itm.unit,
            "useLineColorForBulletBorder": true,
            "valueField": itm.col,
            "balloonText": "<span style='font-size:10px;'>[["+itm.col+"]] "+itm.unit+"<br>"+itm.equipRefDis+"</span>"
        });
        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
        });
    });
    var chart = AmCharts.makeChart(test, {
        "type": "serial",
        "theme": "light",
        "marginRight": 40,
        "marginLeft": 40,
        "autoMarginOffset": 20,
        "mouseWheelZoomEnabled":true,
        "legend": {
            "equalWidths": false,
            "periodValueText": "total: [[value.sum]]",
            "position": "top",
            "valueAlign": "left",
            "valueWidth": 100
        },
        "valueAxes": [{
            "id": "v1",
            "axisAlpha": 0,
            "unit" : grphs[0].unit,
            "unitPosition" : "right",
            "position": "left",
            "ignoreAxisWidth":true
        }],
        "balloon": {
            "borderThickness": 1,
            "shadowAlpha": 0
        },
        "graphs": grphs,
        "chartScrollbar": {
            "graph": "g1",
            "oppositeAxis":false,
            "offset":30,
            "scrollbarHeight": 80,
            "backgroundAlpha": 0,
            "selectedBackgroundAlpha": 0.1,
            "selectedBackgroundColor": "#888888",
            "graphFillAlpha": 0,
            "graphLineAlpha": 0.5,
            "selectedGraphFillAlpha": 0,
            "selectedGraphLineAlpha": 1,
            "autoGridCount":true,
            "color":"#AAAAAA"
        },
        "chartCursor": {
            "pan": true,
            "valueLineEnabled": true,
            "valueLineBalloonEnabled": true,
            "cursorAlpha":1,
            "cursorColor":"#258cbb",
            "limitToGraph":"g1",
            "valueLineAlpha":0.2,
            "valueZoomable":true
        },
        "valueScrollbar":{
          "oppositeAxis":false,
          "offset":50,
          "scrollbarHeight":10
        },
        "categoryField": "ts",
        "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
    "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
        },
        "dataProvider": chartData
    });
    chart.addListener("rendered", zoomChart);
    
    zoomChart();
    
    function zoomChart() {
        chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
    }
});
  • No labels