从 Google Sheet 查询制作 Google Annotation Chart

Question

我在使用 Google 注释图表时遇到了一些问题。我从Google 提供的示例开始，然后尝试通过 Fiddle 对其进行调整，以使用来自我的google sheets document 查询的数据。

我觉得我搞砸了查询本身，或者将查询结果放入图表并绘制它。

任何帮助将不胜感激。我的 JavaScript 包含在下面。

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


      function initialize() {
            var opts = {sendMethod: 'auto'};
  // Replace the data source URL on next line with your data source URL.
        var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1KVOMq2usUg-FRmfx9cnGgJVR-wQZ2oJcyufaIgcxzFw', opts);

  // Optional request to return only column C and the sum of column B, grouped by C members.
            query.setQuery('select B, select G');

  // Send the query with a callback function.
            query.send(handleQueryResponse);
}

            function handleQueryResponse(response) {

              if (response.isError()) {
               alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
                return;
  }

              var data = response.getDataTable();
        var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

        var options = {
          displayAnnotations: false
        };

        chart.draw(data, options);        
}

Answer 1

几件事情......

1. 指定的回调函数不存在
   将 -- drawChart 更改为 -- initialize
   （添加到下面的load 语句而不是使用--setOnLoadCallback）
2. 选择列的查询不正确
   将 -- select B, select G 更改为 -- select B, G
   （添加到下面的url而不是使用--query.setQuery）

---

请参阅以下工作 sn-p...

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

function initialize() {
  var opts = {sendMethod: 'auto'};
  // Replace the data source URL on next line with your data source URL.
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1KVOMq2usUg-FRmfx9cnGgJVR-wQZ2oJcyufaIgcxzFw/gviz/tq?tq=select B,G', opts);

  // Send the query with a callback function.
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var data = response.getDataTable();
  var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

  var options = {
    displayAnnotations: false
  };

  chart.draw(data, options);
}

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