Memuat Visualisasi Google melalui Ajax

Saya memiliki beberapa tab di aplikasi saya, dan setiap tab memuat sub-halaman berbeda melalui fungsi jQuery load().

Masalah saya adalah beberapa halaman berisi plugin Google Visualisasi dan ini tidak akan berfungsi.

Pendekatan pertama saya adalah memuat JavaScript untuk API Visualisasi di subhalaman, namun tidak berhasil - halaman akan menjadi kosong dan macet saat memuat sesuatu dari apis.google.com

Pendekatan kedua saya adalah dengan memasukkan div ke tempat visualisasi seharusnya berada, lalu memanggil skrip (yang saya definisikan sebelumnya) yang akan mengisi div ini.

Berikut skrip yang menghasilkan visualisasi:

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

Berikut ini script yang saya gunakan untuk memanggil script di atas (ketika tab diklik).

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

Selain itu, ini mungkin terkait: Di awal dokumen, saya menggunakan jQuery untuk memuat beberapa ruang lain di halaman terlebih dahulu:

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

Terima kasih,


javascript jquery google-api google-visualization
person Goro    schedule 08.04.2010    source sumber

Jawaban (1)


arrow_upward
4
arrow_downward

Ada dua hal yang salah dengan ini:

  1. google.setOnLoadCallback(drawChart) memanggil fungsi tersebut, jadi saya membuangnya.

  2. skrip mencoba mengisi div sebelum dimuat, jadi saya menambahkan pemanggilan fungsi ke drawChart() di dalam skrip pengubah tab:

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

Ini berfungsi sekarang.

person Goro    schedule 09.04.2010
comment
Ini adalah jawaban yang sangat bagus. Saya telah membahas pertanyaan lain dengan jawaban yang mendapat lebih banyak suara, tetapi kesederhanaan dalam pertanyaan ini membuatnya berhasil. Terima kasih. - person ScreenSeer; 08.10.2015