How to fix Google Chart that only loads on refresh?

Question

My site is built as one page that show and hide sections (pages) with javascript. Im trying to load 3 Google Charts on my page, but the charts will only load if i go to the page (statistics) and refresh it?

In my html file i call the google js api:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

In my js file i call the google charts before my $(document).ready:

google.load('visualization', '1', {'packages': ['corechart']});
$(document).ready(function() {
   function drawChart() {
      var data = new google.visualization.DataTable();
      // Adding data and options to chart1
      var data_2 = google.visualization.arrayToDataTable([]);
      // Adding data and options to chart2
      var data_3 = google.visualization.arrayToDataTable([]);
      // Adding data and options to chart3

      var chart = new google.visualization.PieChart(document.getElementById('class_chart_div'));
      chart.draw(data, options);
      var chart = new google.visualization.ColumnChart(document.getElementById('column_chart_div'));
      chart.draw(data_2, options_2);
      var chart = new google.visualization.PieChart(document.getElementById('gender_chart_div'));
      chart.draw(data_3, options_3);
   }

   if ($("#pageStatistics']").hasClass('active')) {
      drawChart();
   }

});// document.ready end

It all works, but as i wrote, when i go to the statistics page i have to refresh the site before the charts load..?

Answer 1

Why instead of doing that on the document ready you change your code to refresh the charts. Everytime you open your statistics page.

$("#pageStatistics").click(function(){
   drawChart();
})

Also if you click on that area of your page and then check if it has the "active" class