在 Google 个图表中从同一数据源创建多个查询

Question

我有一个大致如下所示的电子表格：

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

我想做的是从中创建一个 table，其中填充了对以下值的查询：

家庭总数
过去 30 天的家庭
30 天前的家庭
年初至今的家庭。

我的首选方法是为每个查询设置一个变量，然后使用这些变量手动创建一个 table。

例如：

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);

给出以下table：

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

然而，最大的问题是你似乎只能为每个查询设置一个回调，所以得到这样的东西似乎需要为每个查询嵌套回调，每个查询都变成一个数据table然后最后终于加入了。

例如：

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 次查询。

所以，Whosebug，我想把这个问题分为两部分。

第 1 部分： 是否可以避免后一种方法来创建此 table？

第 2 部分： 如果不是，构造 google.visualization.data.join() 以达到预期结果的最佳方法是什么？

谢谢。

Answer 1

为每个类别使用带有计算列的 DataView...

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>

在 Google 个图表中从同一数据源创建多个查询

Creating multiple queries from the same data source in Google Charts

javascript

charts

google-visualization

google-query-language