从Google工作表查询中制作Google注释图表

Question

我在处理Google注释图表时遇到了一些麻烦。我从Google提供的示例开始，然后尝试通过小提琴调整以使用来自我的google sheets document查询的数据。

我觉得自己已经搞乱了查询本身，或将查询结果放入图表并绘制它。

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

  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
   （添加下面的网址，而不是使用 - query.setQuery）

---

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

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>