title: Creating a Google Dashboard with multiple Dashboards and Datatables fed from Google Spreadsheets with Queries
body: <p>first time posting on here.</p>
  
  <p>I am trying to develop a Google Dashboard, that displays multiple charts. Each chart needs to be fed data from different data-tables. These data-tables are populated from the same Google spreadsheet, via JSON feed. I am producing the data tables by running queries against the Google Spreadsheet, and storing them as variables when Google return the query.</p>
  
  <p>For further complication, I have category filters that need to effect each chart. This is done by creating a dashboard for each separate data-table, like a 'logical' dashboard, aggregating them together, and I am creating category filters on each of them. The first instance of category filter I am putting an event listen on, to affect to other category filters on the other dashboards. That way all the chart are effect by the state changes made on only on category filter.</p>
  
  <p>For proof of concept I am developing the below code, I have run Javascript console and fixed all errors, but I am still getting a blank page.</p>
  
  <p>I hope the above makes sense, thanks in advance for your help.</p>
  
  <pre><code>    &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Google visualisation demo: chart query controls&lt;/title&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.
      // Packages for all the other charts you need will be loaded
      // automatically by the system.
      google.load('visualization', '1.1', {'packages':['controls','linechart']});
  
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawVisualization);
  
      // Declare variables outside of functions.
      var data1;
      var data2;
  
      function drawVisualization() {
  
      // Replace the data source URL on next line with your data source URL.
      var query1 = new google.visualization.Query('http://spreadsheets.google.com/tq?key=0AkjuVAUAbKOZdFM2LTByOVdLMkpFT3FmVTFyOW1jT2c&amp;output=html');
  
      // Apply query language.
      query1.setQuery('SELECT E,F,I,C, sum(D) group by E,F,I,C');
  
      // Send the query with a callback function.
      query1.send(Dashboard1);
  
      // Replace the data source URL on next line with your data source URL.
      var query2 = new google.visualization.Query('http://spreadsheets.google.com/tq?key=0AkjuVAUAbKOZdFM2LTByOVdLMkpFT3FmVTFyOW1jT2c&amp;output=html');
  
      // Apply query language.
      query2.setQuery('SELECT E,F,I,C, sum(D) group by E,F,I,C');
  
      // Send the query with a callback function.
      query2.send(Dashboard2);
  
      // First category filter
      network_filter = createDashboard1();
      network_filter2 = createDashboard2();
  
      // Second category filter
      introducer_filter = createDashboard1();
      introducer_filter2 = createDashboard2();
  
      // Third category filter
      business_filter = createDashboard1();
      business_filter2 = createDashboard2();
  
      // First category filter Event Listener
      google.visualization.events.addListener(network_filter, 'statechange', function() {
          network_filter2.setState(network_filter.getState());
          network_filter2.draw();
      });
  
      // Second category filter Event Listener
      google.visualization.events.addListener(business_filter, 'statechange', function() {
          business_filter2.setState(business_filter.getState());
          business_filter2.draw();
      });
  
      // Third category filter Event Listener
      google.visualization.events.addListener(introducer_filter, 'statechange', function() {
          introducer_filter2.setState(introducer_filter.getState());
          introducer_filter2.draw();
      });
  
      }
  
      function Dashboard1(response) {
          data1 = response.getDataTable();
          return data1;
          }
  
      // Everything is loaded. Assemble your dashboard...
      function createDashboard1() {
  
      // Wrapper for category filter declared in above function
      var networkPicker = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'network_filter',
      'options': {
        'filterColumnLabel': 'Main Network',
        'ui': {
          'labelStacking': 'vertical',
          'allowTyping': false,
          'allowMultiple': false    
        }
      }
      });
  
      // Wrapper for category filter declared in above function
      var businessPicker = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'business_filter',
      'options': {
        'filterColumnLabel': 'Business',
        'ui': {
          'labelStacking': 'vertical',
          'allowTyping': false,
          'allowMultiple': false    
        }
      }
      });
  
      // Wrapper for category filter declared in above function
      var introducerPicker = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'introducer_filter',
      'options': {
        'filterColumnLabel': 'Introducer',
        'ui': {
          'labelStacking': 'vertical',
          'allowTyping': false,
          'allowMultiple': false    
        }
      }
      });
  
      // Chart effected by category filter
      var introducerChart = new google.visualization.ChartWrapper({
      'chartType': 'ColumnChart',
      'containerId': 'introducer_chart',
  
      'options': {
        'width': 800,
        'height': 200
      },
      'view': {'columns': [2, 4]}
      });
  
      // Table effected by category filter
      var table = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'table',
      'options': {
        'width': '900px'
      }
      });
  
      // Bind, glue and draw dashboard
      var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
          bind(networkPicker, businessPicker).
          bind(businessPicker, introducerPicker).
          bind(introducerPicker, introducerChart).
          bind(introducerPicker, table).
          draw(data1);
  
          return networkPicker;
          return businessPicker;
          return introducerPicker;
          return data1;
      }
  
      function Dashboard2(response) {
          data2 = response.getDataTable();
          return data2;
      }
  
      // Everything is loaded. Assemble your dashboard...
      function createDashboard2() {
  
      // Wrapper for category filter declared in above function
      var networkPicker = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'network_filter2',
      'options': {
        'filterColumnLabel': 'Main Network',
        'ui': {
          'labelStacking': 'vertical',
          'allowTyping': false,
          'allowMultiple': false    
        }
      }
      });
  
      // Wrapper for category filter declared in above function
      var businessPicker = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'business_filter2',
      'options': {
        'filterColumnLabel': 'Business',
        'ui': {
          'labelStacking': 'vertical',
          'allowTyping': false,
          'allowMultiple': false    
        }
      }
      });
  
      // Wrapper for category filter declared in above function
      var introducerPicker = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'introducer_filter2',
      'options': {
        'filterColumnLabel': 'Introducer',
        'ui': {
          'labelStacking': 'vertical',
          'allowTyping': false,
          'allowMultiple': false    
        }
      }
      });
  
      // PieChart effected by category filter
      var productPie = new google.visualization.ChartWrapper({
         'chartType':'PieChart',
         'containerId': 'product_pie',
          'options': {'width': 300,'height': 300},
          'view': {'columns': [3, 4]}
      });
  
      // Table effected by category filter 
      var table = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'table2',
      'options': {
        'width': '900px'
      }
      });
  
      // Bind, glue and draw dashboard
      var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
          bind(networkPicker, businessPicker).
          bind(businessPicker, introducerPicker).
          bind(introducerPicker, productPie).
          bind(introducerPicker, table).
          draw(data2);
  
          return networkPicker;
          return businessPicker;
          return introducerPicker;
          return data2;
      }
  
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawVisualization);
  
      &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="network_filter"&gt;&lt;/div&gt;
          &lt;!--Display none because its managed by event listener--&gt;
          &lt;div id="network_filter2" style="display:none"&gt;&lt;/div&gt;
          &lt;div id="business_filter"&gt;&lt;/div&gt;
          &lt;!--Display none because its managed by event listener--&gt;
          &lt;div id="business_filter2" style="display:none"&gt;&lt;/div&gt;
          &lt;div id="introducer_filter"&gt;&lt;/div&gt;
          &lt;!--Display none because its managed by event listener--&gt;
          &lt;div id="introducer_filter2" style="display:none"&gt;&lt;/div&gt;
          &lt;div id="introducer_chart"&gt;&lt;/div&gt;
          &lt;div id="product_pie"&gt;&lt;/div&gt;
          &lt;div id="table"&gt;&lt;/div&gt;
          &lt;div id="table2"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;body&gt;
  &lt;/html&gt;
  </code></pre>