Загрузка визуализаций Google через Ajax

У меня есть несколько вкладок в моем приложении, и каждая вкладка загружает другую подстраницу с помощью функции jQuery load().

Моя проблема в том, что некоторые страницы содержат плагины Google Visualization, и они не будут работать.

Мой первый подход состоял в том, чтобы иметь JavaScript для API визуализации на загружаемой подстранице, но это не сработало - страница становилась пустой и зависала при загрузке чего-либо с apis.google.com.

Мой второй подход заключался в том, чтобы просто вставить div туда, куда должна идти визуализация, а затем вызвать скрипт (который я определил ранее), который заполнит этот div.

Вот скрипт, который генерирует визуализацию:

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
  });
}

Вот сценарий, который я использую для вызова вышеуказанного сценария (при нажатии на вкладку).

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

Кроме того, это может быть связано: в начале документа я использую jQuery для предварительной загрузки некоторых других пробелов на странице:

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

Спасибо,


javascript jquery google-api google-visualization
person Goro    schedule 08.04.2010    source источник

Ответы (1)


arrow_upward
4
arrow_downward

В этом были две ошибки:

  1. google.setOnLoadCallback(drawChart) вызывал функцию, поэтому я избавился от этого.

  2. скрипт пытался заполнить div до того, как он был загружен, поэтому я добавил вызов функции drawChart() внутри скрипта смены табуляции:

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

Это работает сейчас.

person Goro    schedule 09.04.2010
comment
Это очень хороший ответ. Я рассмотрел другие вопросы с ответами, набравшими больше голосов, но простота в этом просто заставила его работать. Спасибо. - person ScreenSeer; 08.10.2015