javascript - Loading Google Visualisations via Ajax - Stack Overflow

admin管理员组

文章数量:1330909

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

Share Improve this question Follow asked Apr 8, 2010 at 21:06 GoroGoro 10.2k2323 gold badges7979 silver badges108108 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.

本文标签： javascriptLoading Google Visualisations via AjaxStack Overflow