Google Charts only shows one chart per page

Question

I have two charts i would like to display, but for some reason it only shows the first one

it only shows the sarahChart and if i exchange the order of the functions it will show only the anthonyChart

here is my script:

<script type="text/javascript">

    google.load('visualization', '1.0', {'packages':['corechart']});

    google.setOnLoadCallback(drawSarahChart);

    google.setOnLoadCallback(drawAnthonyChart);

    function drawSarahChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Emplacement');
        data.addColumn('number', 'Quantité');
        data.addRows(<?php echo "[\n";
            echo $prefix . " [\n";
            echo '  "Stock",' . "\n";
            echo $count_stock . '' . "\n";
            echo " ]";
            $prefix = ",\n";
            echo $prefix . " [\n";
            echo '  "Maintenance",' . "\n";
            echo $count_maint . '' . "\n";
            echo " ]";
            $prefix = ",\n";
            foreach ( $combined_depart as $key => $value ) {
                echo $prefix . " [\n";
                echo '  "' . $key . '",' . "\n";
                echo $value . '' . "\n";
                echo " ]";
                $prefix = ",\n";
        }
        echo "\n]";?>);

        var options = {title:'Nombre de materiel par emplacement',
                                     width:600,
                                     height:500};

        var chart = new google.visualization.PieChart(document.getElementById('Sarah_chart_div'));
        chart.draw(data, options);
    }

    function drawAnthonyChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'type');
        data.addColumn('number', 'quantité');
        data.addRows(<?php echo "[\n";
            foreach ( $combined as $key => $value ) {
                echo $prefix . " [\n";
                echo '  "' . $key . '",' . "\n";
                echo $value . '' . "\n";
                echo " ]";
                $prefix = ",\n";
        }
        echo "\n]"; ?>);

        var options = {
            title: "Nombre de materiel par type",
            width: 400,
            height: 300
        };

        var chart = new google.visualization.BarChart(document.getElementById('Anthony_chart_div'));
        chart.draw(data, options);
    }

</script>

and here is the html:

<table class="columns">
  <tr>
    <td><div id="Sarah_chart_div"></div></td>
            <td><div id="Anthony_chart_div"></div></td>
  </tr>
</table>

By the way if i put

  google.charts.load('current', {'packages':['corechart']});

  google.charts.setOnLoadCallback(drawSarahChart);

  google.charts.setOnLoadCallback(drawAnthonyChart);

At the start instead, neither of the charts show the console shows the following error:

Cannot read property 'load' of undefined

and if i replace only the 2 lines with

  google.charts.setOnLoadCallback(drawSarahChart);

  google.charts.setOnLoadCallback(drawAnthonyChart);

neither show again, the console shows the following error:

Cannot read property 'setOnLoadCallback' of undefined

please help, thank you!

Answer 1

Actually you are trying to use same callback twice. Instead of this, you can define a callback function which includes your two sub-function drawSarahChart and drawAnthonyChart

google.charts.setOnLoadCallback(function(){
    drawSarahChart();
    drawAnthonyChart();
});

Answer 2

first setOnLoadCallback should only be called once per page

but you can include the callback directly in the load statement

try something like this...

google.load('visualization', '1.0', {
  callback: function () {
    drawSarahChart();
    drawAnthonyChart();
  },
  packages: ['corechart']
});