Multiple Google Charts, only one working

Question

I want to show multiple Google Charts one page. I've searched for a solution and found one at this site. A function to easily create a new chart. Now it's only working with one chart, when I add the second none of them work anymore. The Json and the div id are correct, both work when I only use code for 1 of the charts. Any idea what's the problem/solution here?

$(function() {
var jsonDataClicks = $.ajax({
    url: 'ajax/get-total-clicks.php',
    dataType: 'json',
    async: false
    }).responseText;

var jsonDataActiveProducts = $.ajax({
    url: 'ajax/get-total-active-products.php',
    dataType: 'json',
    async: false
    }).responseText;

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

google.charts.setOnLoadCallback(function() {
    drawChart(jsonDataClicks, 'total_clicks');
});

google.charts.setOnLoadCallback(function() {
    drawChart(jsonDataActiveProducts, 'total_active_products');
});

function drawChart(dataInput, containerID) {
    var data = new google.visualization.DataTable(dataInput);
    var containerDiv = document.getElementById(containerID);

    var options = {
        vAxis: {
            gridlines: {
                color: '#ebebeb'
            }
        },
        animation: {
            startup: true,
            duration: 1000,
            easing: 'out'
        },
        hAxis: {
            slantedText: true,
            slantedTextAngle: 45,
            textStyle : {
                fontName: 'Lato',
                fontSize: 11,
                color: '#6f6f6f'
            }
        },
        vAxis: {
            textStyle: {
                fontName: 'Lato',
                fontSize: 11,
                color: '#6f6f6f'
            }
        },
        tooltip: {
            textStyle: {
                fontName: 'Lato',
                fontSize: 11,
                color: '#6f6f6f'
            }
        },
        width: 1160,
        height: 400,
        chartArea: {'width': '80%', 'height': '80%'},
        colors: ['#47ab8b'],
        legend: 'none'
    };

    var chart = new google.visualization.ColumnChart(containerDiv);

    chart.draw(data, options);
}

});

Answer 1

the method --> google.charts.setOnLoadCallback -- should really only be called once per page load

instead, add the 'callback' to the google.charts.load statement

also, highly recommend not using async: false for $.ajax calls

you can draw the chart on $.ajax({}).done

recommend similar setup to the following...

$(function() {
  google.charts.load('current', {
    'callback': function () {

      drawChart('ajax/get-total-clicks.php', 'total_clicks');
      drawChart('ajax/get-total-active-products.php', 'total_active_products');

      function drawChart(dataURL, containerID) {
        $.ajax({
          url: dataURL,
          dataType: 'json'
        }).done(function (dataInput) {
          var data = new google.visualization.DataTable(dataInput);
          var containerDiv = document.getElementById(containerID);

          var options = {
              vAxis: {
                  gridlines: {
                      color: '#ebebeb'
                  }
              },
              animation: {
                  startup: true,
                  duration: 1000,
                  easing: 'out'
              },
              hAxis: {
                  slantedText: true,
                  slantedTextAngle: 45,
                  textStyle : {
                      fontName: 'Lato',
                      fontSize: 11,
                      color: '#6f6f6f'
                  }
              },
              vAxis: {
                  textStyle: {
                      fontName: 'Lato',
                      fontSize: 11,
                      color: '#6f6f6f'
                  }
              },
              tooltip: {
                  textStyle: {
                      fontName: 'Lato',
                      fontSize: 11,
                      color: '#6f6f6f'
                  }
              },
              width: 1160,
              height: 400,
              chartArea: {'width': '80%', 'height': '80%'},
              colors: ['#47ab8b'],
              legend: 'none'
          };

          var chart = new google.visualization.ColumnChart(containerDiv);
          chart.draw(data, options);
        });
      }
    },
    'packages':['corechart']
  });
});