title: Google Chart dashboard multiple data
body: <p>I created a google chart dashboard with different data for each donut chart but only data_2 returns, instead of data_1 for the first chart <code>&lt;div&gt;</code> and data_2 for the second chart <code>&lt;div&gt;</code>. <a href="https://developers.google.com/chart/interactive/docs/basic_multiple_charts" rel="nofollow">Source document</a> for multi chart w/ different data requires separate functions, but is there a way to use two datasets in the first function drawStuff_1?<br>
  I ultimately want one dashboard, one ControlWrapper (one-to-many), multiple data sets (carlos, josh, etc.) and multiple donut charts (<code>&lt;div&gt;</code> for carlos, <code>&lt;div&gt;</code> for josh, whoever else).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        google.charts.load('current', {'packages':['corechart', 'controls']});
        google.charts.setOnLoadCallback(drawStuff_1);
        google.charts.setOnLoadCallback(drawStuff_2);
  
        function drawStuff_1() {
  
          var dashboard = new google.visualization.Dashboard(
            document.getElementById('programmatic_dashboard_div'));
            
          programmaticFilter_1 = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'programmatic_control_div_1',
            'options': {
              'filterColumnLabel': 'Status',
              'ui': {'labelStacking': 'vertical'}
            }
          });
      // First dataset
         var data_1 = new google.visualization.arrayToDataTable([
          ['Status', 'Count'],
          ['Dual Approved' , 5],
          ['Approved', 7],
          ['Review', 3],
          ['Draft', 2],
          ['Not In', 6],
          ['Edit Rerun', 1],
          ]);
         programmaticChart_1  = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'programmatic_chart_div_1',
          'options': {
            'width': 290,
            'height': 220,
            'chartArea': {'left': 20, 'top': 20, 'right': 0, 'bottom': 0},
            'pieSliceText': 'value', //percentage' 'value' 'label''none'
            'pieHole': 0.4,
            'legend': {position: 'left', textStyle: {color: 'black', fontSize: 9, fontName: 'Garamond' }},
            'pieSliceBorderColor': 'Black',
            'title': 'Josh',
            
          }
        });
  
        dashboard.bind(programmaticFilter_1, programmaticChart_1);
        dashboard.draw(data_1);
  
      }
      
     function drawStuff_2() {
  
          var dashboard = new google.visualization.Dashboard(
            document.getElementById('programmatic_dashboard_div'));
            
  // second dataset      
             var data_2 = new google.visualization.arrayToDataTable([
          ['Status', 'Count'],
          ['Dual Approved' , 1],
          ['Approved', 10],
          ['Review', 2],
          ['Draft', 9],
          ['Not In', 10],
          ['Edit Rerun', 4],
          ]);
          
         programmaticChart_2  = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'programmatic_chart_div_2',
          'options': {
            'width': 250,
            'height': 220,
            'legend': 'none',
            'chartArea': {'left': 20, 'top': 20, 'right': 0, 'bottom': 0},
            'pieSliceText': 'value', //percentage' 'value' 'label''none'
            'pieHole': 0.4,
            'pieSliceBorderColor': 'Black',
            'title': 'Carlos',
          }
        });
  
        dashboard.bind(programmaticFilter_1, programmaticChart_2);
        dashboard.draw(data_2);
  }
      &lt;/script&gt;
   
    &lt;body&gt;
      &lt;div id="programmatic_dashboard_div" style="border: 1px solid #ccc"&gt;
                  &lt;td&gt;
              &lt;div id="programmatic_control_div_1" style="padding-left: 2em; min-width: 250px"&gt;&lt;/div&gt;
            &lt;/td&gt;
        &lt;table class="columns"&gt;
          &lt;tr&gt;
            &lt;td&gt;
              &lt;div id="programmatic_chart_div_1"&gt;&lt;/div&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;div id="programmatic_chart_div_2"&gt;&lt;/div&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>