How to toggle 2 charts using buttons

Question

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// 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'],
        <?php 
              while($row=mysqli_fetch_array($res))
              {
                  echo "['".$row["locationid"]."',".$row["number"]."],";
              } ?>

              ]);

    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'],
     <?php 
              while($row=mysqli_fetch_array($res2))
              {
                  echo "['".$row["roleid"]."',".$row["number"]."],";
              } ?>

              ]);

    // 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();
}

    </script>   
    <body>
   <input type = 'button' id = 'b1' value = 'Draw Bar Chart' />
    <input type = 'button' id = 'b2' value = 'Draw Pie Chart' />
    <table>
  <tr>
<td><div id="Sarah_chart_div" style="border: 1px solid #ccc"></div></td>
<td><div id="Anthony_chart_div" style="border: 1px solid #ccc"></div></td>
    </tr>
    </table>

    </body>


</html>

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

In your code there is extra `drawBar();} ` after `Pie Button.Onclick` — Fussionweb, Oct 26 '19 at 01:42
@Fussionweb That is needed to display the chart without clicking any button when the page load? or am i doing it wrong? — Soh Zheng Wei, Oct 26 '19 at 02:19
I think you got extra `}` after the you called drawBar function — Fussionweb, Oct 26 '19 at 02:27
@Fussionweb Thanks for the prompt reply, It's for closing the "drawAnthonyChart " function. — Soh Zheng Wei, Oct 26 '19 at 02:31

score 0 · Accepted Answer · answered Oct 26 '19 at 14:37

you can initialize the buttons in the load callback,
and pass the chart type to the draw functions...

note: I've added hard-coded data for example purposes,
you can add back your php data.

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function() {
  var barsButton = document.getElementById('b1');
  var pieButton = document.getElementById('b2');

  barsButton.onclick = function() {
    drawSarahChart('ColumnChart');
    drawAnthonyChart('ColumnChart');
  }

  pieButton.onclick = function() {
    drawSarahChart('PieChart');
    drawAnthonyChart('PieChart');
  }

  drawSarahChart('ColumnChart');
  drawAnthonyChart('ColumnChart');
});

function drawSarahChart(chartType) {
  var chart = new google.visualization.ChartWrapper({
    containerId: 'Sarah_chart_div'
  });

  var data = google.visualization.arrayToDataTable([
    ['Year', 'location'],
    ['A', 100],
    ['B', 120]
  ]);

  var options = {
    title: 'FY 2018',
    width: 400,
    height: 300
  };

  chart.setOptions(options);
  chart.setChartType(chartType);
  chart.setDataTable(data);
  chart.draw();
}

function drawAnthonyChart(chartType) {
  var chart = new google.visualization.ChartWrapper({
    containerId: 'Anthony_chart_div'
  });

  var data = google.visualization.arrayToDataTable([
    ['Year', 'location'],
    ['A', 100],
    ['B', 120]
  ]);

  var options = {
    title: 'FY 2019',
    width: 400,
    height: 300
  };

  var barsButton = document.getElementById('b1');
  var pieButton = document.getElementById('b2');

  chart.setOptions(options);
  chart.setChartType(chartType);
  chart.setDataTable(data);
  chart.draw();
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<input type='button' id='b1' value='Draw Bar Chart' />
<input type='button' id='b2' value='Draw Pie Chart' />
<table>
  <tr>
    <td>
      <div id="Sarah_chart_div" style="border: 1px solid #ccc"></div>
    </td>
    <td>
      <div id="Anthony_chart_div" style="border: 1px solid #ccc"></div>
    </td>
  </tr>
</table>

Thanks! this is just what im looking for. On a side note, how do i add toolbar so i can export/download as csv and pdf? — Soh Zheng Wei, Oct 27 '19 at 10:52
check these answers --> [csv](https://stackoverflow.com/a/42956427/5090771) & [pdf](https://stackoverflow.com/a/46426849/5090771) — WhiteHat, Oct 27 '19 at 17:38

How to toggle 2 charts using buttons

1 Answers1