在谷歌圖表相同的數據源創建多個查詢

Question

我有一個電子表格，一般是這樣的：

Date  Families 
1/2/2016 3 
1/3/2016 4 
1/4/2016 5 

我希望做的是從它創建一個與該查詢填充表以下值：

• 家庭總數從過去30天
• 家庭從30天
• 家庭之前
• 本年度至今的家庭。

我這樣做的首選方法是爲每個查詢設置一個變量，然後使用這些變量手動創建一個表。

例如：

var sum1 = value from Query1 
var sum2 = value from Query2 
var sum3 = value from Query3 
var sum4 = value from Query4 

var data = new.google.visualization.DataTable({ 
    data.AddColumn('string', 'This Month'); 
    data.AddColumn('string', 'Last Month'); 
    data.AddColumn('string', 'Year to Date'); 
    data.AddColumn('string', 'All Time'); 

    data.AddRow([sum1, sum2, sum3, sum4]) 
}) 

var chart = new.google.visualization.Table(); 
chart.draw(data); 

爲了給下表：

'This Month' 'Last Month' 'Year to Date' 'All Time' 
sum1   sum2   sum3    sum4 

然而，最大的問題是，它似乎只能設置一個回調每個查詢，所以越來越像這似乎可能需要對每個查詢進行嵌套回調，每個查詢都會變成一個數據表，然後在最後加入。

例如：

var q1 = google.visualization.Query(URL); 
q1.setQuery(QueryStatement1); 
q1.send(function (r1) { 
    var data1 = r1.getDataTable(); 
    var q2 = google.visualization.Query(URL); 
    q2.setQuery(QueryStatement2); 
    q2.send(function(r2) { 
     var data2 = r2.getDataTable(); 

     var joinedData = google.visualization.data.join(
      data1, 
      data2, 
      'full', 
      [0,0], 
      [[0,0], [0,0]] 
    ); 
    } 
} 

後者方式似乎要複雜得多，並可能會借給自己帶格式的困難。反覆多次調用相同的URL似乎也是多餘的。

這個頁面將繼續進行，它會對3個不同的列做類似的事情，所以會從同一個電子表格中獲得12次查詢。

所以，StackOverflow，我想把這個問題分爲兩部分。

PART 1：是否有可能避免後一種方法創建此表？

第2部分：如果不是，構建google.visualization.data.join（）以獲得所需結果的最佳方法是什麼？

謝謝。

Answer 1

使用與每個類別計算列的數據視圖......

var view = new google.visualization.DataView(response.getDataTable()); 
view.setColumns([0, 
    { 
    calc: function (dt, r) { 
     if ((dt.getValue(r, 0).getMonth() === (new Date()).getMonth()) && 
      (dt.getValue(r, 0).getFullYear() === (new Date()).getFullYear())) { 
     return dt.getValue(r, 1); 
     } 
     return null; 
    }, 
    type: 'number', 
    label: 'This Month' 
    }, 
    ... 

然後使用group()方法來彙總結果...

var aggData = google.visualization.data.group(
    view, 
    [{ 
    column: 0, 
    label: 'Total', 
    modifier: function() { 
     return 'Total'; 
    }, 
    type: 'string' 
    }], 
    [ 
    { 
     column: 1, 
     label: view.getColumnLabel(1), 
     aggregation: google.visualization.data.sum, 
     type: 'number' 
    }, 
    ... 

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['table'] 
 
}); 
 

 
function drawChart() { 
 
    var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1-UbQQMofRecLpO9zUYoscQxo4Wi50N8YnmQmbW1lNJ0/edit?usp=sharing'); 
 
    query.setQuery('select A, B'); 
 
    query.send(function (response) { 
 
    var view = new google.visualization.DataView(response.getDataTable()); 
 
    view.setColumns([0, 
 
     { 
 
     calc: function (dt, r) { 
 
      if ((dt.getValue(r, 0).getMonth() === (new Date()).getMonth()) && 
 
       (dt.getValue(r, 0).getFullYear() === (new Date()).getFullYear())) { 
 
      return dt.getValue(r, 1); 
 
      } 
 
      return null; 
 
     }, 
 
     type: 'number', 
 
     label: 'This Month' 
 
     }, 
 
     { 
 
     calc: function (dt, r) { 
 
      var curDate = new Date(); 
 
      var rowDate = dt.getValue(r, 0); 
 
      var thisMonth = new Date(curDate.getFullYear(), curDate.getMonth(), 1); 
 
      var lastMonth = new Date(curDate.getFullYear(), curDate.getMonth(), 0); 
 
      lastMonth = new Date(lastMonth.getFullYear(), lastMonth.getMonth(), 1); 
 
      if ((rowDate.getTime() >= lastMonth.getTime()) && 
 
       (rowDate.getTime() < thisMonth.getTime())) { 
 
      return dt.getValue(r, 1); 
 
      } 
 
      return null; 
 
     }, 
 
     type: 'number', 
 
     label: 'Last Month' 
 
     }, 
 
     { 
 
     calc: function (dt, r) { 
 
      if (dt.getValue(r, 0).getYear() === (new Date()).getYear()) { 
 
      return dt.getValue(r, 1); 
 
      } 
 
      return null; 
 
     }, 
 
     type: 'number', 
 
     label: 'Year to Date' 
 
     }, 
 
     { 
 
     calc: function (dt, r) { 
 
      return dt.getValue(r, 1); 
 
     }, 
 
     type: 'number', 
 
     label: 'All Time' 
 
     } 
 
    ]); 
 

 
    var aggData = google.visualization.data.group(
 
     view, 
 
     [{ 
 
     column: 0, 
 
     label: 'Total', 
 
     modifier: function() { 
 
      return 'Total'; 
 
     }, 
 
     type: 'string' 
 
     }], 
 
     [ 
 
     { 
 
      column: 1, 
 
      label: view.getColumnLabel(1), 
 
      aggregation: google.visualization.data.sum, 
 
      type: 'number' 
 
     }, 
 
     { 
 
      column: 2, 
 
      label: view.getColumnLabel(2), 
 
      aggregation: google.visualization.data.sum, 
 
      type: 'number' 
 
     }, 
 
     { 
 
      column: 3, 
 
      label: view.getColumnLabel(3), 
 
      aggregation: google.visualization.data.sum, 
 
      type: 'number' 
 
     }, 
 
     { 
 
      column: 4, 
 
      label: view.getColumnLabel(4), 
 
      aggregation: google.visualization.data.sum, 
 
      type: 'number' 
 
     } 
 
     ] 
 
    ); 
 

 
    var chartDiv = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.Table(chartDiv); 
 
    chart.draw(aggData); 
 
    }); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>