I recently tried using the Google Charts API on a page which had been .load()ed in jQuery (AJAX) and I was running into a weird problem: loading the chart would cause the page to redirect to the code for the chart, resulting in an abort of the actual page loading and a blank screen.
I used the following code which fixes the issue, note the use of the callback parameter in google.load().
<div id="chart" style="width: 100%; height: 500px;"></div>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"], callback:drawChart});
function drawChart() {
var jsonData = $.ajax({
url: "generate_data.php",
dataType:"json",
async: false
}).responseText;
var options = {
title: 'Your Chart Title'
};
var data = new google.visualization.DataTable(jsonData);
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
</script>