title: How to toggle 2 charts using buttons
body: <p>I have a page that needs to compare 2 different data between pie and bar chart, there are 2 buttons to switch between them but it only works on 1 of the chart</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  // Load Charts and the corechart package.
  google.charts.load('current', {'packages':['corechart']});
  
  // Draw the Sarah's chart when Charts is loaded.
  google.charts.setOnLoadCallback(drawSarahChart);
  
  // Draw the Anthony's chart when Charts is loaded.
  google.charts.setOnLoadCallback(drawAnthonyChart);
  
  // Callback that draws the chart for Sarah's.
  function drawSarahChart() {
  
  
      var chart = new google.visualization.ChartWrapper({
  containerId: 'Sarah_chart_div'
  });
      var data = google.visualization.arrayToDataTable([
          ['Year','location'],
          &lt;?php 
                while($row=mysqli_fetch_array($res))
                {
                    echo "['".$row["locationid"]."',".$row["number"]."],";
                } ?&gt;
  
                ]);
  
      var options = {title:'FY 2018',
              width:400,
              height:300};
  
  
      var barsButton = document.getElementById('b1');
  var PieButton = document.getElementById('b2');
  
  chart.setOptions(options);
  
  function drawBars() {
  chart.setChartType('ColumnChart');
  chart.setDataTable(data);
  chart.draw();
  }
  
  function drawPie() {
  chart.setChartType('PieChart');
  chart.setDataTable(data);
  chart.draw();
  }
  
  barsButton.onclick = function () {
  drawBars();
  }
  
  PieButton.onclick = function () {
  drawPie();
  }
  drawBars();
  }
  
  // Callback that draws the chart for Anthony's.
  function drawAnthonyChart() {
      var chart = new google.visualization.ChartWrapper({
          containerId: 'Anthony_chart_div'
          });
      // Create the data table for Anthony's pizza.
      var data = google.visualization.arrayToDataTable([
            ['Year','location'],
       &lt;?php 
                while($row=mysqli_fetch_array($res2))
                {
                    echo "['".$row["roleid"]."',".$row["number"]."],";
                } ?&gt;
  
                ]);
  
      // Set options for Anthony's pie chart.
      var options = {title:'FY 2019',
      width:400,
      height:300};
  
  
      var barsButton = document.getElementById('b1');
  var PieButton = document.getElementById('b2');
  
  chart.setOptions(options);
  
  function drawBars() {
  chart.setChartType('ColumnChart');
  chart.setDataTable(data);
  chart.draw();
  }
  
  function drawPie() {
  chart.setChartType('PieChart');
  chart.setDataTable(data);
  chart.draw();
  }
  
  barsButton.onclick = function () {
  drawBars();
  }
  
  PieButton.onclick = function () {
  drawPie();
  }
  drawBars();
  }
  
      &lt;/script&gt;   
      &lt;body&gt;
     &lt;input type = 'button' id = 'b1' value = 'Draw Bar Chart' /&gt;
      &lt;input type = 'button' id = 'b2' value = 'Draw Pie Chart' /&gt;
      &lt;table&gt;
    &lt;tr&gt;
  &lt;td&gt;&lt;div id="Sarah_chart_div" style="border: 1px solid #ccc"&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;td&gt;&lt;div id="Anthony_chart_div" style="border: 1px solid #ccc"&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;/body&gt;
  
  
  &lt;/html&gt;
  
  </code></pre>
  
  <p>The button should be able to change both charts simultaneously, adding another 2 buttons can probably solve this but I'm trying to reduce any more buttons</p>