Question

我正在尝试从Google电子表格中提取数据，将其转换为DataTable，并根据Google Apps文档将值推送到Dashboard LineChart。我已设法用我手动填充的数组执行此操作，但我还没有设法弄清楚如何使用电子表格正确执行此操作。它目前声明一个或多个参与者未能绘制，我有一个荣耀列标签。任何想法我做错了。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart', 'controls']});
      google.charts.setOnLoadCallback(drawStuff);
	  
	  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/1bqRWtvB6kxBfeIuVzCwVXZ5_mCn1b542CaIwE116jK8/edit#gid=0', opts);  
        query.setQuery("Select *");		
        // 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;		
		}
		else  {
	   var data = response.getDataTable();
	   return data;
	   }
	  }
      function drawStuff() {
	    var data = initialize;
      
        var dashboard = new google.visualization.Dashboard(
          document.getElementById('programmatic_dashboard_div'));

        // We omit "var" so that programmaticSlider is visible to changeRange.
        programmaticSlider = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'programmatic_control_div',
          'options': {
            'filterColumnLabel': 'Query',
            'ui': {'labelStacking': 'vertical'}
          }
        });

       programmaticChart  = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
        'containerId': 'programmatic_chart_div',
        'options': {
          'width': 750,
          'height': 300,
          'legend': {position: 'top', textStyle: {color: 'blue', fontSize: 16}},
          'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
          'chart': {
          title: 'Popular Queries',
          subtitle: 'by number of clicks'
        },
        }
      });
	  
	  dashboard.bind(programmaticSlider, programmaticChart);
      dashboard.draw(data);
    }

    </script>
  </head>
  <body>
    <div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
      <table class="columns">
        <tr>
          <td>
            <div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
            <div>
              <button style="margin: 1em 1em 1em 2em" onclick="changeRange();">
                Select range [2, 5]
              </button><br />
            </div>
            <script type="text/javascript">
              function changeRange() {
                programmaticSlider.setState({'lowValue': 2, 'highValue': 5});
                programmaticSlider.draw();
              }
            </script>
          </td>
          <td>
            <div id="programmatic_chart_div"></div>
			<div id="chart_div"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

使用查询从googlesheet检索数据并将其推送到仪表板

0 个答案: