最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Loading Google Visualisations via Ajax - Stack Overflow

programmeradmin6浏览0评论

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,

Share Improve this question asked Apr 8, 2010 at 21:06 GoroGoro 10.2k23 gold badges79 silver badges108 bronze badges
Add a ment  | 

1 Answer 1

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.

发布评论

评论列表(0)

  1. 暂无评论