Page Comparison

var myChart = query('myChart');
var fooAll = queryAll('bar');
var myButton = this;

fooAll.forEach(function(item){
  if (myButton.id == item.id) {myButton.classNames = "view-default focus";}
  else {item.classNames = "view-default";
}});

var myQuery;
if(this.fooApply != undefined){
    var butnStart = query('fooStart');
    var butnEnd = query('fooEnd');
    myQuery = sprintf('readAll(foo).hisRead($1..$2).hisRollup(avg,1hr)',butnStart.range,butnEnd.range);
} else myQuery = sprintf('readAll(foo).hisRead($1).hisRollup(avg,1hr)',this.range);

myChart.hquery = myQuery;

var promise = finstack.eval(myQuery, function(event){
    var fin = event.result.toObj();
    var maxnum=0;
    fin.forEach(function(itm){
        itm = Object.keys(itm);
        itm = itm.filter(function(imt){ return !imt.includes("Unit") });
        itm = itm.length - 1;
        if(itm > maxnum) maxnum = itm;
    });
    var names = [];
    for(var i=0; i<maxnum; i++) names.push([event.result.columns[i+1].name, event.result.columns[i+1].metadata.dis]);
    names.sort(function(a,b){
        if(a[1] < b[1]) return -1;
        if(a[1] > b[1]) return 1;
        return 0;
    });
    var grphs = [];
    for(var i=0; i<maxnum; i++){
        grphs.push({
            "id": "g"+i,
            "fillAlphas": 0.4,
            "lineAlpha": 0,
            "fillColors": ["#ff0000","#00ff00","#0000ff","#d000ff","#ffffa00"][i],
            "valueField": names[i][0],
            "title": names[i][1],
             "balloonText": "<div style='margin:5px; font-size:19px;'><b>[[value]]</b></div>",
        });
    }
    var chart = AmCharts.makeChart(myChart.view, {
        "type": "serial",
        "theme": "light",
        "marginRight": 80,
        "dataProvider": fin,
        "numberFormatter": {precision: 1, decimalSeparator:'.', thousandsSeparator:''},
        "graphs": grphs,
        "legend": {
            // "labelWidth":50,
            // "valueWidth":0,
            // "useGraphSettings": false,
            // "backgroundColor":"#FF0000",
            // "color":"#FF0000",
            "labelText":"[[title]]"
        },
        "chartScrollbar": {
            "graph": "g0",
            "scrollbarHeight": 25,
            "backgroundAlpha": 0,
            "selectedBackgroundAlpha": 0.1,
            "selectedBackgroundColor": "#888888",
            "graphFillAlpha": 0,
            "graphLineAlpha": 0.5,
            "selectedGraphFillAlpha": 0,
            "selectedGraphLineAlpha": 1,
            "autoGridCount": true,
            "color": "#AAAAAA"
        },
        "chartCursor": {
            "categoryBalloonDateFormat": "JJ:NN, DD MMMM",
            "cursorPosition": "mouse"
        },
        "categoryField": "ts",
        "categoryAxis": {
            "minPeriod": "mm",
            "parseDates": true
        },
        "export": {
            "enabled": true,
             "dateFormat": "YYYY-MM-DD HH:NN:SS"
        }
    });
});

var hquery = query('myChart').hquery;

function download(filename, text) {
    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', filename);
    
    element.style.display = 'none';
    document.body.appendChild(element);
    
    element.click();
    
    document.body.removeChild(element);
}

if(hquery !== undefined) finstack.eval(hquery+'.ioWriteCsv("")',function(event){
    event = event.result.toObj()[0].val;
    download("ChartData.csv",event);
});