# Draw Multiple Charts

This page shows how to draw multiple charts on one web page.

## Draw Multiple Charts on One Page

If you want to draw multiple charts on one web page, include code for the following
in the `<head>` of the page:

- Load all the packages required by your charts in a single call to `google.charts.load()`.
- For each chart on the page, add a call to `google.charts.setOnLoadCallback()` with the callback that draws the chart as an input - for example, `google.charts.setOnLoadCallback(myPieChart)`.

For example, suppose you want to draw two pie charts,
showing how much pizza your friends Sarah and Anthony ate last night.
The following example shows how to display both charts side-by-side.

|---|---|
|   |   |


\<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="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\> // Load Charts and the corechart package. google.charts.load('current', {'packages':\['corechart'\]}); // Draw the pie chart for Sarah's pizza when Charts is loaded. google.charts.setOnLoadCallback(drawSarahChart); // Draw the pie chart for the Anthony's pizza when Charts is loaded. google.charts.setOnLoadCallback(drawAnthonyChart); // Callback that draws the pie chart for Sarah's pizza. function drawSarahChart() { // Create the data table for Sarah's pizza. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows(\[ \['Mushrooms', 1\], \['Onions', 1\], \['Olives', 2\], \['Zucchini', 2\], \['Pepperoni', 1\] \]); // Set options for Sarah's pie chart. var options = {title:'How Much Pizza Sarah Ate Last Night', width:400, height:300}; // Instantiate and draw the chart for Sarah's pizza. var chart = new google.visualization.PieChart(document.getElementById('Sarah_chart_div')); chart.draw(data, options); } // Callback that draws the pie chart for Anthony's pizza. function drawAnthonyChart() { // Create the data table for Anthony's pizza. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows(\[ \['Mushrooms', 2\], \['Onions', 2\], \['Olives', 2\], \['Zucchini', 0\], \['Pepperoni', 3\] \]); // Set options for Anthony's pie chart. var options = {title:'How Much Pizza Anthony Ate Last Night', width:400, height:300}; // Instantiate and draw the chart for Anthony's pizza. var chart = new google.visualization.PieChart(document.getElementById('Anthony_chart_div')); chart.draw(data, options); }

<br />

```html
<html>
  <head>
    <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 pie chart for Sarah's pizza when Charts is loaded.
      google.charts.setOnLoadCallback(drawSarahChart);

      // Draw the pie chart for the Anthony's pizza when Charts is loaded.
      google.charts.setOnLoadCallback(drawAnthonyChart);

      // Callback that draws the pie chart for Sarah's pizza.
      function drawSarahChart() {

        // Create the data table for Sarah's pizza.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 1],
          ['Onions', 1],
          ['Olives', 2],
          ['Zucchini', 2],
          ['Pepperoni', 1]
        ]);

        // Set options for Sarah's pie chart.
        var options = {title:'How Much Pizza Sarah Ate Last Night',
                       width:400,
                       height:300};

        // Instantiate and draw the chart for Sarah's pizza.
        var chart = new google.visualization.PieChart(document.getElementById('Sarah_chart_div'));
        chart.draw(data, options);
      }

      // Callback that draws the pie chart for Anthony's pizza.
      function drawAnthonyChart() {

        // Create the data table for Anthony's pizza.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 2],
          ['Onions', 2],
          ['Olives', 2],
          ['Zucchini', 0],
          ['Pepperoni', 3]
        ]);

        // Set options for Anthony's pie chart.
        var options = {title:'How Much Pizza Anthony Ate Last Night',
                       width:400,
                       height:300};

        // Instantiate and draw the chart for Anthony's pizza.
        var chart = new google.visualization.PieChart(document.getElementById('Anthony_chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <!--Table and divs that hold the pie charts-->
    <table class="columns">
      <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>
```

## Using a Single Callback to Draw Multiple Charts

The previous example uses two callbacks to draw the charts, because the data
for the two charts are different. If you
want to draw multiple charts for the same data, it may be
more convenient to write a single callback for both charts. The following example
illustrates this.

|---|---|
|   |   |


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

<br />

```html
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/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>
  </head>
<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>
```

[**Next: *Adding Interactivity***](https://developers.google.com/chart/interactive/docs/basic_interactivity)