What am I doing wrong? (Two charts on one file)

[Juan Andrés Zeni]

Hi everybody. Sorry if my eglish is not good.

I want to create two charts in one file. I know that is possible because I saw multiple topics about this, but I'm learning and I don't understood it completly.
This is my code:

<!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
   
    <!-- GRAFICA ULTIMO MES -->
    <script  type="text/javascript">
          google.load('visualization', '1.0', {'packages':['corechart']});
    </script>
   
    <script type="text/javascript">
      google.setOnLoadCallback(drawChart);

      function drawChart1() {

        // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Proyecto');
      data.addColumn('number', 'Cantidad de Horas');
      data.addRows([
      ['Asisper', 180],
        ['CCIS', 70],
        ['CAMY', 20],
      ]);
        var options = {'title':'Demanda por proyecto',
                       'width':450,
                       'height':290,
                       'backgroundColor':'transparent',
                       };
        var chart = new google.visualization.PieChart(document.getElementById('graficaUltimoMes'));
        chart.draw(data, options);
      }
    </script>
   
   
   
    <!-- FINISH FIRST, START THE NEXT -->
   
   
    <script type="text/javascript">
      google.setOnLoadCallback(drawChart);

      function drawChart2() {
        var data = google.visualization.arrayToDataTable([
        ['Proyecto', '<?=$mes[$numeroMes-1]?>', '<?=$mes[$numeroMes-2]?>','<?=$mes[$numeroMes-3]?>'],

['Aneac',0,84213,0],['Asisper',66748,213509,181200],['CCIS',83836,84213,0],

        ]);

        var options = {
          title: 'Evoluci&oacute;n de la demanda',
          hAxis: {title: 'Proyecto', titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('graficaComparacion'));
        chart.draw(data, options);
      }
    </script>
  

I show them in another file. The both charts separate works great, but when I put them togheter the page is blank.
Can you see the mistake?.
Thank you very much, I hope someone could help me.

[asgallant]

When you put the two together, you renamed the functions, but did not rename them in the callback handler (google.setOnLoadCallback), so they didn't get called when the API loaded.  The simplest fix is to add the "1" and "2" to the end of the function names in the callback handler.  A cleaner solution (IMHO), is to put your drawChart1 and drawChart2 calls into an initializer function, and call that from the callback handler, like this:

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

google.setOnLoadCallback(init);

function init () {
    drawChart1();
    drawChart2();

}

function drawChart1() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Proyecto');
    data.addColumn('number', 'Cantidad de Horas');
    data.addRows([
        ['Asisper', 180],
        ['CCIS', 70],
        ['CAMY', 20],
    ]);
    
    var options = {
        'title': 'Demanda por proyecto',
        'width': 450,
        'height': 290,
        'backgroundColor': 'transparent',
    };
    var chart = new google.visualization.PieChart(document.getElementById('graficaUltimoMes'));
    chart.draw(data, options);
}

function drawChart2() {
    var data = google.visualization.arrayToDataTable([
        ['Proyecto', '<?=$mes[$numeroMes-1]?>', '<?=$mes[$numeroMes-2]?>', '<?=$mes[$numeroMes-3]?>'],

        ['Aneac', 0, 84213, 0], ['Asisper', 66748, 213509, 181200], ['CCIS', 83836, 84213, 0],