กำลังโหลด Google Visualizations ผ่าน Ajax

ฉันมีหลายแท็บในแอปพลิเคชันของฉัน และแต่ละแท็บจะโหลดหน้าย่อยที่แตกต่างกันผ่านฟังก์ชัน jQuery load()

ปัญหาของฉันคือบางหน้ามีปลั๊กอิน Google Visualization และปลั๊กอินเหล่านี้ใช้ไม่ได้

วิธีแรกของฉันคือการโหลด JavaScript สำหรับ Visualization 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});
});

ขอบคุณ,