Загрузка Google визуализаций через Ajax - PullRequest
Новая
       12

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

1 голос
/ 09 апреля 2010

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

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

Моим первым подходом было использование 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});
});

Спасибо

1 Ответ

4 голосов
/ 10 апреля 2010

Было две вещи не так с этим:

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

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

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

Теперь это работает.

...