Loading Google Chart Api using Ajax in html page - html

Question

I am using Ajax code to load the html page
for example:
$.ajax({
url: 'Context.html',
dataType: 'html',
timeout: 500,
success: function(html) {
$("div#mainbody").html(html);
}
});
The Context.html I am loading it in some other html page say Home.html
But I am generating pie charts using google API in Context.html
and the code for generating pie chart i.e in Context.html is
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Count'],
['2005', 70],
['2006', 80],
['2007', 140],
['2008', 220],
['2009', 290],
['2010', 400],
['2011', 500]
]);
var options = {
title: 'Head Count-(Apple Year)',
colors:['#129212']
};
var chart = new google.visualization.ColumnChart(document.getElementById('jsf_headcount_bargraph'));
chart.draw(data, options);
}
</script>
When I am loading Context.html in Home.html page I cannot find the pie chart which is in Context.html after loading it in the Home.html
I tried by giving ALERT(""); in script where I wrote code for pie chart. I was getting alert message,so Ajax is executing javascript but I am not getting pie chart which is same script. So I was stucked with Loading pie chart in Home.html page

Answer 1

If you make Context.html like this
<script>
var j = 20;
alert();
</script>
Then I do get an alert (using $.ajax({success: function() {} }) etc. ).
[ Example ]
function execAjax() {
$.ajax( {
url: 'index2.html',
success: function( html ) {
$("#content").html( html );
checkJSvalue();
},
error: function() {
alert( "Error" );
}
});
}
function checkJSvalue() {
alert( j );
}
Example HTML (index2.html)
<div>
content of index2.html
</div>
<script>
var j = 20;
alert();
</script>
What I have tried to do is to put the code directly in the 'home.html' and I already got errors. You should reverse the order of usage and declaration of the drawchart function anyways.
// Bad
// google.setOnLoadCallback(drawChart);
// function drawChart() {}
// Good
function drawChart() {}
google.setOnLoadCallback(drawChart);
Other than that, I already got this error from the google.jsapi.js (copied locally)
Uncaught Error: Container is not defined format+nl,default,corechart.I.js:841
So something goes wrong there, that is not part of the actual question and it's minified etc. so I won't go there.
Hope this was helpful :)

Answer 2

Everything works just fine if i replace the code
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
To inline
google.load('visualization', '1.0', {'packages':['corechart'], "callback": drawChart});