Создание диаграммы аннотаций Google из запроса на лист Google

Question

У меня возникли проблемы с диаграммой аннотации google, над которой я работаю. Я начал с примера, представленного Google, а затем попытался настроить его через Fiddle для использования данных из запроса моего 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
   (добавляется к URL-адресу ниже, вместо использования - 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>