title: Multiple Google Charts, only one working
body: <p>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?</p>
  
  <pre><code>$(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);
  }
  </code></pre>
  
  <p>});</p>