Page Comparison

Image Added

template

Code Block

<div class="s-horizontal">
  <div class="selectDate" on-click="showHide">Select...</div>
  <select style="height:40px; margin-right:5px;" on-change="foldUpdate" value={{selectedDate}}>
      <option value="today">Today</option>
      <option value="yesterday">Yesterday</option>
      <option value="thisWeek">This Week</option>
      <option value="lastWeek">Last Week</option>
      <option value="now() - 7day .. now()">Last 7 Days</option>
      <option value="now() - 1mo .. now()">Last 30 Days</option>
      <option value="other">{{#if myStart==myEnd}}{{myStart}}{{else}}{{myStart}} to {{myEnd}}{{/if}}</option>
      <option value="range">Custom Range...</select>option>
  </div>select>
  <select<div styleclass="height:200px; margin-top:5px;s-horizontal" id="selectMulticustomRange">
    <div class="queryOptions" value={{selected}} name="tests-text">Custom Date Range: </div>
    <div class="s-compare" on-changeclick="foldUpdate" multiple>start">{{start}}</div>
     {{#myPoints}}<div class="s-text">to</div>
     <option value={{id}}<div class="s-compare" on-click="end">{{disend}}</option>div>
    {{/myPoints}}
  </select>
<div class="s-scroll">
    <div id="chart0"icon-checkmark view-superman-value s-circle" on-click="go"></div>
  </div>
</div>
  <select style="widthheight:100%200px; heightmargin-top:100%5px;"></div>
    <div id="chart1selectMulti" style="width:100%; height:100%;"></div>class="queryOptions" value={{selected}} name="test" on-change="foldUpdate" multiple>
    {{#myPoints}}
    <option value={{id}}>{{dis}}</option>
    {{/myPoints}}
  </select>
<div class="s-scroll">
    <div id="chart2chart0" style="width:100%; height:100%;"></div>
    <div id="chart3chart1" style="width:100%; height:100%;"></div>
    <div id="chart4chart2" style="width:100%; height:100%;"></div>
    <div id="chart5chart3" style="width:100%; height:100%;"></div>
    <div id="chart6chart4" style="width:100%; height:100%;"></div>
    <div id="chart7chart5" style="width:100%; height:100%;"></div>
    <div id="chart8chart6" style="width:100%; height:100%;"></div>
    <div id="chart9chart7" style="width:100%; height:100%;"></div>
</div>
    <div id="chart8" style="width:100%; height:100%;"></div>
    <div id="chart9" style="width:100%; height:100%;"></div>
</div>

model

Code Block
{ data: { myPoints:[], myStart:"Date Picker", myEnd:"Date Picker", other: "Date Picker", start: "Start", end: "End" } }

style

Code Block

.s-scroll{
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.selectDate{
    display: flex;
   	 flex-direction: row;
  	  align-items: center;
	    justify-content: center;
    height: 40px;
    padding-right: 15px;
    padding-left: 15px;
    background-color: #f8f8f8;
    border-radius: 5px;
    border: .5px solid #a6a6a6;
    margin-right: 5px;
}
.s-horizontal{
    display: flex;
    	flex-direction: row;
}

init

Code Block

this.ractive.fire("obtainData");
var self.s-text{
    display: = thisflex;
var model   = self.ractiveflex-direction: row;
var hide    = truealign-items: center;
 setTimeout(function() { var showHideheight: = self.view.querySelector("#selectMulti");
showHide.style.display = "none";
}, 100);

model.on('showHide', function(event) {
if(hide===true){
 showHide = self.view.querySelector("#selectMulti");
showHide.style.display = "";
hide=false;
}
else{
   showHide = self.view.querySelector("#selectMulti");
showHide.style.display = "none"; 
hide= true;
}
});

model.on('foldUpdate', function(event) {
    var selectedPoints = [];
    var selected   = model.get("selected");
    var selectedDate   = model.get("selectedDate");
        if (selectedDate =="other"){
            top.app.ShowCalendar(null,function(data)
                {
                    var start = moment(data.range.start).format("YYYY-MM-DD");
                    var end   = moment(data.range.end).format("YYYY-MM-DD");
                    var dateStringStart = start;
                    var startDate = new moment(dateStringStart).format('MMM DD, YYYY');
                    var dateStringEnd = end;
                    var endDate = new moment(dateStringEnd).format('MMM DD, YYYY');
                    model.set('myStart', startDate);
                    model.set('myEnd', endDate30px;
    margin-left: 10px;
}
.s-compare{
    margin-left: 10px;
    height: 30px;
    background-color: #f8f8f8;
    border: 1.3px solid #bcbcbc;
    border-radius: 4px;
    padding-right: 8px;
    padding-left: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.s-compare:hover{
    cursor: pointer;
    background-color: #ededed;
}
.s-circle{
    border-radius: 50%;
    margin-left: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: bold;
    justify-content: center;
    font-size: 15px;
    height: 30px;
    width: 30px;
}
.s-circle:hover{
    background-color:#63b4e4;
    cursor: pointer;
}

init

Code Block

this.ractive.fire("obtainData");
var self    = this;
var model   = self.ractive;
var hide    = true;
var start;
var end;
setTimeout(function() {
var showHide = self.view.querySelector("#selectMulti");
showHide.style.display = "none";
var customRange = self.view.querySelector("#customRange");
customRange.style.display = "none";
}, 100);
 
model.on('showHide', function(event) {
if(hide===true){
 showHide = self.view.querySelector("#selectMulti");
showHide.style.display = "";
hide=false;
}
else{
   showHide = self.view.querySelector("#selectMulti");
showHide.style.display = "none";
hide= true;
}
});
 
model.on('foldUpdate', function(event) {
    var selectedPoints = [];
    var selected   = model.get("selected");
    var selectedDate   = model.get("selectedDate");
    customRange = self.view.querySelector("#customRange");
        customRange.style.display =  "none";
            if (startselectedDate == end"range"){
        customRange = self.view.querySelector("#customRange");
                 selectedDate = startcustomRange.style.display = "";
    }
        if (selectedDate =="other"){
        }        top.app.ShowCalendar(null,function(data)
                else{
                    var start       selectedDate = (start+'..'+end= moment(data.range.start).format("YYYY-MM-DD");
                    var end   }
= moment(data.range.end).format("YYYY-MM-DD");
                   selected.forEach(function(p,index) {
   var dateStringStart = start;
                    var selectedPoints.push({startDate = new moment(dateStringStart).format('MMM DD, YYYY');
                    var dateStringEnd = idend;
     : p,              var endDate = new moment(dateStringEnd).format('MMM DD, YYYY');
           index        : model.set('chartmyStart'+index,, startDate);
                    model.set('myEnd', endDate);
     });                   if  });(start == end){
                           setTimeout(function() {selectedDate = start;
                      var test0 = self.view.querySelector("#chart0");}
                        else{
test0.style.display = "none";                         var test1selectedDate = self(start+'.view.querySelector("#chart1".'+end);
                        test1.style.display}
= "none";                   selected.forEach(function(p,index) {
    var  test2 = self.view.querySelector("#chart2");                selectedPoints.push({
        test2.style.display = "none";                  id      : varp,
test3 = self.view.querySelector("#chart3");                         test3.style.display =index "none";  : 'chart'+index,
                     var test4 = self.view.querySelector("#chart4" });
                        test4.style.display = "none"});
                    setTimeout(function() {
                        var test5test0 = self.view.querySelector("#chart5#chart0");
                        test5test0.style.display = "none";
                        var test6test1 = self.view.querySelector("#chart6#chart1");
                        test6test1.style.display = "none";
                        var test7test2 = self.view.querySelector("#chart7#chart2");
                        test7test2.style.display = "none";
                        var test8test3 = self.view.querySelector("#chart8#chart3");
                        test8test3.style.display = "none";
                        var test9test4 = self.view.querySelector("#chart9#chart4");
                        test9test4.style.display = "none";
                        var test5 = selectedPointsself.view.forEach(function(p,index) {querySelector("#chart5");
                        test5.style.display = "none";
     setTimeout(function() {                  var test6 = self.view.querySelector("#chart6");
           finstack.eval('readAll(id=='+p.id+')', function(data){             test6.style.display = "none";
                        var test7 myTitle=data self.resultview.toObjquerySelector("#chart7");
                        test7.style.display = "none";
              finstack.eval('readAll(id=='+p.id+').hisRead('+selectedDate+')', function(data){         var test8 = self.view.querySelector("#chart8");
                        test8.style.display = "none";
     queryData=data.result.toObj();                   var test9 = self.view.querySelector("#chart9");
                       var queryDataPointstest9.style.display = []"none";
                                            queryDataselectedPoints.forEach(function(p,index) {
                            setTimeout(function() {
                  queryDataPoints.push({              finstack.eval('readAll(id=='+p.id+')', function(data){
                                     ts  var myTitle=data.result.toObj();
   : p.ts,                                                     v0   : p.v0.toFixed(1),
finstack.eval('readAll(id=='+p.id+').hisRead('+selectedDate+')', function(data){
                                            queryData=data.result.toObj();
  });                                          var queryDataPoints = })[];
                                        var  test = self.view.querySelector('#'+p.index);
queryData.forEach(function(p,index) {
                                       test.style.display = "";       queryDataPoints.push({
                             var chart = AmCharts.makeChart(test, {                   ts      : p.ts,
          "type": "serial",                                     "theme": "light",   v0   : p.v0.toFixed(1),
                             "dataProvider": queryDataPoints,                  });
                  "date": "ts",                          });
          "value": "GetPrettyValue(v0)",                              var test = self.view.querySelector('#'+p.index);
   "precision" : 1,                                   test.style.display = "marginRight":;
40,                                     "marginLeft": 40,
var chart = AmCharts.makeChart(test, {
                                    "autoMarginOffsettype": 20"serial",
                                    "dataDateFormattheme": "HH:mm:sslight",
                                    "valueAxesdataProvider": [ {
  queryDataPoints,
                                     "iddate": "v1ts",
   
                                    "axisAlphavalue": 0"GetPrettyValue(v0)",
                                        "positionprecision" : "left",
   1,
                                    "ignoreAxisWidthmarginRight": true40,
                                    } ]"marginLeft": 40,
                                    "balloonautoMarginOffset": {
20,
                                       "borderThicknessdataDateFormat": 1,
   "HH:mm:ss",
                                    "shadowAlphavalueAxes": 0,[ {
                                   },     "id": "v1",
                              "titles": [          "axisAlpha": 0,
                           	{             "position": "left",
                                    	    "idignoreAxisWidth": "Title-1",true
                                    		"size": 15} ],
                                    		"textballoon": myTitle[0].dis, {
                                       	} "borderThickness": 1,
                                  ],      "shadowAlpha": 0,
                              "graphs": [ {    },
                                    "idtitles": "g1", [
                                        {
  "balloon": {                                         "dropid": true"Title-1",
                                        "adjustBorderColor    "size": false15,
                                            "colortext": "#ffffff"myTitle[0].dis,
                                        "type": "smoothedLine"}
                                    }],
 
                                      "fillAlphasgraphs": 0.2,[ {
                                        "bulletid": "roundg1",
                                        "bulletBorderAlphaballoon": 1,{
                                        "bulletColordrop": "#FFFFFF"true,
                                        "bulletSizeadjustBorderColor": 5false,
                                        "hideBulletsCountcolor": 50"#ffffff",
                                        "lineThicknesstype": 2,"smoothedLine"
                                        "title": "red line"},
                                        "useLineColorForBulletBorderfillAlphas": true0.2,
                                        "valueFieldbullet": "v0round",
                                        "balloonTextbulletBorderAlpha": 1,
  "<span style='font-size:18px;'>[[v0]]</span>"                                     } ],"bulletColor": "#FFFFFF",
                                        "chartCursorbulletSize": {5,
                                        "categoryBalloonDateFormathideBulletsCount":"MMM DD YYYY JJ:NN:SS" 50,
                                        "valueLineEnabledlineThickness": true2,
                                        "valueLineBalloonEnabledtitle": "red trueline",
                                        "cursorAlphauseLineColorForBulletBorder": 0true,
                                        "zoomablevalueField": false"v0",
                                        "valueZoomableballoonText": true, "<span style='font-size:18px;'>[[v0]]</span>"
                                    } ],
  "valueLineAlpha": 0.5                                 "chartCursor": {
  },                                      "valueScrollbarcategoryBalloonDateFormat": {"MMM DD YYYY JJ:NN:SS",
                                        "autoGridCountvalueLineEnabled": true,
                                        "colorvalueLineBalloonEnabled": "#000000"true,
                                        "scrollbarHeightcursorAlpha": 0,
   50                                     }"zoomable": false,
                                        "categoryFieldvalueZoomable": "ts"true,
                                    "categoryAxis": {   "valueLineAlpha": 0.5
                                    "equalSpacing": true},
                                        "parseDatesvalueScrollbar": true,{
                                        "dashLengthautoGridCount": 1true,
                                        "minorGridEnabledcolor": true"#000000",
                                        "gridPositionscrollbarHeight": "start",50
                                    },
           "dateFormats":[                         "categoryField": "ts",
                         {              "categoryAxis": {
                                        "periodequalSpacing":"fff" true,
                                        "parseDates": true,
              "format":"L:NN:SS A"                         "dashLength": 1,
                         },               "minorGridEnabled": true,
                                   {     "gridPosition": "start",
                                                "perioddateFormats":"ss",[
                                                   {
  "format":"L:NN:SS A"                                                    },"period":"fff",
                                                    {  "format":"L:NN:SS A"
                                                   "period":"mm"},
                                                   {
  "format":"L:NN A"                                                    }"period":"ss",
                                                   {   "format":"L:NN:SS A"
                                                   "period":"hh",},
                                                   {
                                     "format":"L:NN A"                 "period":"mm",
                                                      },"format":"L:NN A"
                                                   },
  {                                                 {
     "period":"DD",
                                                        "period":"hh",
                                                      "format":"L:NN A"
                                                   },
                                                   {
                                                      "period":"DD",
                                                      "format":"MMM DD"
                                                   },
                                                   {
                                                      "period":"WW",
                                                      "format":"MMM DD"
                                                   },
                                                   {
                                                      "period":"MM",
                                                      "format":"MMM"
                                                   },
                                                   {
                                                      "period":"YYYY",
                                                      "format":"YYYY"
                                                   }]
                                      },
                                      "export": {
                                        "enabled": true
                                      },
                                    });
                                    });
                                    });
                                    }, 1000);
                                    }, 1000);
                                    });
                                        },
                                        {periods:true});
                                        }
     
        if(selectedDate!=="other"){
        model.set('myStart', "Date Picker");
        model.set('myEnd', "Date Picker");
     
     selected.forEach(function(p,index) {
        selectedPoints.push({
            id      : p,
            index   : 'chart'+index,
        });
     });
    setTimeout(function() {
var test0 = self.view.querySelector("#chart0");
test0.style.display = "none";
var test1 = self.view.querySelector("#chart1");
test1.style.display = "none";
var test2 = self.view.querySelector("#chart2");
test2.style.display = "none";
var test3 = self.view.querySelector("#chart3");
test3.style.display = "none";
var test4 = self.view.querySelector("#chart4");
test4.style.display = "none";
var test5 = self.view.querySelector("#chart5");
test5.style.display = "none";
var test6 = self.view.querySelector("#chart6");
test6.style.display = "none";
var test7 = self.view.querySelector("#chart7");
test7.style.display = "none";
var test8 = self.view.querySelector("#chart8");
test8.style.display = "none";
var test9 = self.view.querySelector("#chart9");
test9.style.display = "none";
    selectedPoints.forEach(function(p,index) {
setTimeout(function() {
finstack.eval('readAll(id=='+p.id+')', function(data){
var myTitle=data.result.toObj();
        
finstack.eval('readAll(id=='+p.id+').hisRead('+selectedDate+')', function(data){
queryData=data.result.toObj();
var queryDataPoints = [];
queryData.forEach(function(p,index) {
        queryDataPoints.push({
            ts      : p.ts,
              v0   "format":"MMM DD" p.v0.toFixed(1),
        });
});
var test = self.view.querySelector('#'+p.index);
test.style.display = "";
                      var chart = AmCharts.makeChart(test, {
"type": "serial",
  "theme": "light",
    "dataProvider": queryDataPoints,
     }"date": "ts",
    "value": "GetPrettyValue(v0)",
  "precision" : 1,
  "marginRight": 40,
  "marginLeft": 40,
  "autoMarginOffset": 20,
  "dataDateFormat": "HH:mm:ss",
  "valueAxes": [ {
    "id": "v1",
    "axisAlpha": 0,
       {"position": "left",
    "ignoreAxisWidth": true
  } ],
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0,
  },
  "titles": [
        {
            "periodid": "WWTitle-1",
            "size": 15,
            "text": myTitle[0].dis,
        }
    ],
  "graphs": [ {
       "formatid": "MMM DDg1",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
                         "color": "#ffffff",
   },   "type": "smoothedLine"
    },
    "fillAlphas": 0.2,
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
{    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "v0",
    "balloonText": "<span style='font-size:18px;'>[[v0]]</span>"
  } ],
  "chartCursor": {
      "categoryBalloonDateFormat":"MMM DD YYYY JJ:NN:SS",
    "valueLineEnabled": true,
     "periodvalueLineBalloonEnabled":"MM" true,
    "cursorAlpha": 0,
    "zoomable": false,
    "valueZoomable": true,
    "valueLineAlpha": 0.5
  },
  "valueScrollbar": {
    "autoGridCount": true,
    "color": "#000000",
    "scrollbarHeight": 50
  },
  "formatcategoryField": "MMMts",
  "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
        "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
            },"dateFormats":[
               {
                  "period":"fff",
                {  "format":"L:NN:SS A"
               },
               {
                   "period":"YYYYss",
                  "format":"L:NN:SS A"
               },
               {
  "format":"YYYY"                "period":"mm",
                  "format":"L:NN A"
               }],
               {
                      },
       "period":"hh",
                  "format":"L:NN A"
          "export": {    },
               {
                    "enabledperiod":"DD",
true                  "format":"MMM DD"
                   },
               {
                  "period":"WW",
 });                     "format":"MMM DD"
               });,
               {
                  "period":"MM",
 });                     "format":"MMM"
               },
1000);               {
                     }"period":"YYYY",
1000);                     "format":"YYYY"
               });]
  },
  "export": {
    "enabled": true
  },
});
});
});
}, 1000);
}, 1000);
});
}
});

model.on('start', function(event) {
   top.app.ShowCalendar(null,function(data){
      }, start = moment(data.range.start).format("YYYY-MM-DD");
     var startPretty = new moment(start).format('MMM      D, YYYY');
   model.set('start', startPretty);
   });
});
 
model.on('end', function(event) {
   top.app.ShowCalendar(null,function(data){
  {periods:true});     end = moment(data.range.end).format("YYYY-MM-DD");
     var endPretty = new moment(end).format('MMM D, YYYY');
   model.set('end', endPretty);
   });
});
 
   model.on('go', function(event) {
    var }selectedPoints = [];
    var selected      if(selectedDate!=="other"){= model.get("selected");
        model.set('myStart', "Date Picker");
        model.set('myEnd', "Date Picker");
     
     selected.forEach(function(p,index) {
        selectedPoints.push({
            id      : p,
            index   : 'chart'+index,
        });
     });
    setTimeout(function() {
var test0 = self.view.querySelector("#chart0");
test0.style.display = "none";
var test1 = self.view.querySelector("#chart1");
test1.style.display = "none";
var test2 = self.view.querySelector("#chart2");
test2.style.display = "none";
var test3 = self.view.querySelector("#chart3");
test3.style.display = "none";
var test4 = self.view.querySelector("#chart4");
test4.style.display = "none";
var test5 = self.view.querySelector("#chart5");
test5.style.display = "none";
var test6 = self.view.querySelector("#chart6");
test6.style.display = "none";
var test7 = self.view.querySelector("#chart7");
test7.style.display = "none";
var test8 = self.view.querySelector("#chart8");
test8.style.display = "none";
var test9 = self.view.querySelector("#chart9");
test9.style.display = "none";
    selectedPoints.forEach(function(p,index) {
setTimeout(function() {
finstack.eval('readAll(id=='+p.id+')', function(data){
var myTitle=data.result.toObj();
        
finstack.eval('readAll(id=='+p.id+').hisRead('+selectedDate+start+'..'+end+')', function(data){
queryData=data.result.toObj();
var queryDataPoints = [];
queryData.forEach(function(p,index) {
        queryDataPoints.push({
            ts      : p.ts,
            v0   : p.v0.toFixed(1),
        });
});
var test = self.view.querySelector('#'+p.index);
test.style.display = "";
var chart = AmCharts.makeChart(test, {
"type": "serial",
  "theme": "light",
    "dataProvider": queryDataPoints,
    "date": "ts",
    "value": "GetPrettyValue(v0)",
  "precision" : 1,
  "marginRight": 40,
  "marginLeft": 40,
  "autoMarginOffset": 20,
  "dataDateFormat": "HH:mm:ss",
  "valueAxes": [ {
    "id": "v1",
    "axisAlpha": 0,
    "position": "left",
    "ignoreAxisWidth": true
  } ],
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0,
  },
  "titles": [
		{
			        {
            "id": "Title-1",
			
            "size": 15,
			
            "text": myTitle[0].dis,
		}
	
        }
    ],
  "graphs": [ {
    "id": "g1",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
      "color": "#ffffff",
      "type": "smoothedLine"
    },
    "fillAlphas": 0.2,
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "v0",
    "balloonText": "<span style='font-size:18px;'>[[v0]]</span>"
  } ],
  "chartCursor": {
      "categoryBalloonDateFormat":"MMM DD YYYY JJ:NN:SS",
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 0,
    "zoomable": false,
    "valueZoomable": true,
    "valueLineAlpha": 0.5
  },
  "valueScrollbar": {
    "autoGridCount": true,
    "color": "#000000",
    "scrollbarHeight": 50
  },
  "categoryField": "ts",
  "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
            "dateFormats":[
               {
                  "period":"fff",
                  "format":"L:NN:SS A"
               },
               {
                  "period":"ss",
                  "format":"L:NN:SS A"
               },
               {
                  "period":"mm",
                  "format":"L:NN A"
               },
               {
                  "period":"hh",
                  "format":"L:NN A"
               },
               {
                  "period":"DD",
                  "format":"MMM DD"
               },
               {
                  "period":"WW",
                  "format":"MMM DD"
               },
               {
                  "period":"MM",
                  "format":"MMM"
               },
               {
                  "period":"YYYY",
                  "format":"YYYY"
               }]
  },
  "export": {
    "enabled": true
  },
});
});
});
}, 1000);
}, 1000);
});
}
});

program

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

...

Versions Compared

Old Version 2

New Version 3

Key