使用Chartrangeslider进行Google可视化，并从Google文档电子表格导入数据

Question

我有问题，当使用带有chartwrapper和controlwrapper的仪表板环境时，我没有设法从谷歌电子表格中实现我的数据。我使用了谷歌图表网站（https://developers.google.com/chart/interactive/docs/gallery/controls）中的饼图示例，并试图修改但没有成功。也许有人可以提供指针！在此先感谢（链接到jsfiddle：https://jsfiddle.net/Chriseif/08mk90hu/1/#&togetherjs=MHq11Kn3hl）

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" 
src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the controls package.
      google.charts.load('current', {'packages':['corechart', 'controls']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawDashboard);

     // Callback that creates and populates a data table,
      // instantiates a dashboard, a range slider and a pie chart,
      // passes in the data and draws it.
      function drawDashboard() {

                var query = new 



  google.visualization.Query("https://docs.google.com/spreadsheets/d/
1uJNf8RgPjcjm3pUWig0VL4EEww1PG-bNL8mtcxI6SYI/edit");
            query.send(response);

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


        // Create a dashboard.
        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var donutRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'ChartRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnIndex ': 2
          }
        });

        // Create a pie chart, passing some options
        var pieChart = new google.visualization.ChartWrapper({
          'chartType': 'LineChart',
          'containerId': 'chart_div',
          'options': {
            'width': 900,
            'height': 300,
            'pieSliceText': 'value',
            'legend': 'right'
           }
        });

         // Establish dependencies, declaring that 'filter' drives 
'pieChart',
         // so that the pie chart will only display entries that are let 
through
         // given the chosen slider range.
         dashboard.bind(donutRangeSlider, pieChart);

        // Draw the dashboard.
        dashboard.draw(data1);
      }
     </script>
  </head>

  <body>
    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>
  </body>
</html>