I have several tabs in my application, and each tab loads a different sub-page via jQuery load() function.

My problem is that some of the pages contain Google Visualization plugins and these will not work.

My first approach was to have the JavaScript for the Visualization API in the sub-page being loaded, but that did not work - the page would go blank and get stuck while loading something from apis.google

My second approach was to just insert a div where the visualization is supposed to go, then call a script (that I defined earlier) which would populate this div.

Here is the script that generates the visualization:

google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Date');
  data.addColumn('number', 'Temperature');
  data.addColumn('number', 'Humidity');

  data.addRows([
     <?php echo /* raw data outputted by generating functions */ ?>
    ]);


  var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('visualization_div'));
  chart.draw(data, {
    displayAnnotations: true, 
    'scaleColumns': [0,1], 
'scaleType': 'allmaximized',
'displayZoomButtons': false
  });
}

Here is the script that I use to call the above script (when a tab is clicked).

$('#loadarea').load('tab1.php');
drawChart();

Also, this might be related: At the beginning of the document, I use jQuery to pre-load some other spaces on the page:

$(document).ready(function() {
  $('#side-display').load('info.php', {id:<?php echo $id ?>, mode:1});
});

Thanks,

I have several tabs in my application, and each tab loads a different sub-page via jQuery load() function.

My problem is that some of the pages contain Google Visualization plugins and these will not work.

My first approach was to have the JavaScript for the Visualization API in the sub-page being loaded, but that did not work - the page would go blank and get stuck while loading something from apis.google.

My second approach was to just insert a div where the visualization is supposed to go, then call a script (that I defined earlier) which would populate this div.

Here is the script that generates the visualization:

google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Date');
  data.addColumn('number', 'Temperature');
  data.addColumn('number', 'Humidity');

  data.addRows([
     <?php echo /* raw data outputted by generating functions */ ?>
    ]);


  var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('visualization_div'));
  chart.draw(data, {
    displayAnnotations: true, 
    'scaleColumns': [0,1], 
'scaleType': 'allmaximized',
'displayZoomButtons': false
  });
}

Here is the script that I use to call the above script (when a tab is clicked).

$('#loadarea').load('tab1.php');
drawChart();

Also, this might be related: At the beginning of the document, I use jQuery to pre-load some other spaces on the page:

$(document).ready(function() {
  $('#side-display').load('info.php', {id:<?php echo $id ?>, mode:1});
});

Thanks,

• javascript
• jquery
• google-api
• google-visualization

1 Answer 1

There were two things wrong with this:

1. google.setOnLoadCallback(drawChart) was calling the function, so I got rid of that.

2. the script was attempting to fill up the div before it was loaded, so I added the function call to drawChart() inside the tab-changing script:

   $('#loadarea').load('tab1.php', function() { drawChart(); });

This works now.