Draw Multiple Charts Using One Callback

An example of drawing two charts using a single callback.

by Florian Gropp

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!--Table and divs that hold the pie charts-->
<table class="columns">
  <tr>
    <td>
      <div id="piechart_div" style="border: 1px solid #ccc"></div>
    </td>
    <td>
      <div id="barchart_div" style="border: 1px solid #ccc"></div>
    </td>
  </tr>
</table>

JavaScript

// Load Charts and the corechart and barchart packages.
      google.charts.load('current', {
        'packages': ['corechart']
      });

      // Draw the pie chart and bar chart when Charts is loaded.
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        var piechart_options = {
          title: 'Pie Chart: How Much Pizza I Ate Last Night',
          width: 400,
          height: 300
        };
        var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
        piechart.draw(data, piechart_options);

        var barchart_options = {
          title: 'Barchart: How Much Pizza I Ate Last Night',
          width: 400,
          height: 300,
          legend: 'none'
        };
        var barchart = new google.visualization.BarChart(document.getElementById('barchart_div'));
        barchart.draw(data, barchart_options);
      } <
      /script> <
      body >
        <
        !--Table and divs that hold the pie charts-- >
        <
        table class = "columns" >
        <
        tr >
        <
        td > < div id = "piechart_div"
      style = "border: 1px solid #ccc" > < /div></td >
        <
        td > < div id = "barchart_div"
      style = "border: 1px solid #ccc" > < /div></td >
        <
        /tr> <
        /table> <
        /body> <
        /html>