title: How to create google dashboard including piechart and range select filter from a spreadsheet?
body: <p>Does anyone know how to bind the dashboard to a range from Google Spreadsheet?    </p>
  
  <p>In my current code, I am assuming that the dashboard can be bound to a range from Google Spreadsheet like so, but the setDataTable function call is giving me a hard time.</p>
  
  <p><a href="https://docs.google.com/spreadsheets/d/1csv3OQ0IrVNyNIALcpqoLewccgYEEwErsS-Tp43IZfQ/edit#gid=2010342806" rel="nofollow">Link to the spreadsheet</a></p>
  
  <p>Select only two columns from the sheet name and time.</p>
  
  <pre><code>  &lt;html&gt;
            &lt;head&gt;
              &lt;!--Load the AJAX API--&gt;
              &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
              &lt;script type="text/javascript"&gt;
  
                // Load the Visualization API and the controls package.
                google.load('visualization', '1.0', {'packages':['controls']});
  
                // Set a callback to run when the Google Visualization API is loaded.
                google.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() {
  
                  // Create our data table.
                  var data = google.visualization.arrayToDataTable([
                    ['Name', 'Donuts eaten'],
                    ['Michael' , 5],
                    ['Elisa', 7],
                    ['Robert', 3],
                    ['John', 2],
                    ['Jessica', 6],
                    ['Aaron', 1],
                    ['Margareth', 8]
                  ]);
  
                  // 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': 'NumberRangeFilter',
                    'containerId': 'filter_div',
                    'options': {
                      'filterColumnLabel': 'Donuts eaten'
                    }
                  });
  
                  // Create a pie chart, passing some options
                  var pieChart = new google.visualization.ChartWrapper({
                    'chartType': 'PieChart',
                    'containerId': 'chart_div',
                    'options': {`enter code here`
                      'width': 300,
                      '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(data);
                }
              &lt;/script&gt;
            &lt;/head&gt;
  
            &lt;body&gt;
              &lt;!--Div that will hold the dashboard--&gt;
              &lt;div id="dashboard_div"&gt;
                &lt;!--Divs that will hold each control and chart--&gt;
                &lt;div id="filter_div"&gt;&lt;/div&gt;
                &lt;div id="chart_div"&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>