how to make google chart API work under asp.net PageRequestManger - google-visualization

Question

I have a submit button and upon pressing the button I display a loading image and then draw table and then draw google chart.
code for google chart (this works - verified it standalone):
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type='text/javascript'>
google.load('visualization', '1', { packages: ['corechart']});
</script>
<script type='text/javascript'>
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
['ENG 2001', 1336060, 3817614, 974066, 1104797, 6651824, 15727003],
['ENGLISH 2002', 1538156, 3968305, 928875, 1151983, 5940129, 17356071],
['ENGLISH2003', 1576579, 4063225, 1063414, 1156441, 5714009, 16716049]
])
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data, {title:'Yearly Coffee Consumption by Country',
width:1000, height:600,hAxis: {title: 'Year'}, isStacked:true}
);
}
//google.setOnLoadCallback(drawVisualization);
</script>
code for loading image when pressing a submit button
<script type="text/javascript">
// Get the instance of PageRequestManager.
var prm = Sys.WebForms.PageRequestManager.getInstance();
// Add initializeRequest and endRequest
prm.add_initializeRequest(prm_InitializeRequest);
prm.add_endRequest(prm_EndRequest);
// Called when async postback begins
function prm_InitializeRequest(sender, args) {
//Display the loading image
var panelProg = $get('divImage');
panelProg.style.display = '';
}
// Called when async postback ends
function prm_EndRequest(sender, args) {
//Hide the loading image
var panelProg = $get('divImage');
panelProg.style.display = 'none';
//sort the table once retrieved from datatable from server
$(document).ready(function () {
$("#table").dataTable({
"sScrollY": "400px",
"bPaginate": false
});
//draw google chart (doesnt work)
google.setOnLoadCallback(drawVisualization);
//or even doesnt work (assume comment out for google.setOnLoadCallback(drawVisualization);
drawVisualization();
});
}
</script>
my submit button is under update panel (to make partial-page refresh for loading image to show user that it's fetching data from server). with this code, i am able to show loading image and display table but not google chart. I am not sure how I can call google chart draw function to make google chart appear. I have looked at several posting but couldnt find anything that works for my case. I even tried google.load('visualization', '1', { packages: ['corechart'], "callback":drawVisualization}) but it didnt work. I am so lost at this point. what is the correct way to make google chart work under update panel/PageRequestManager? Thanks!

Answer 1

I don't think you need (or want) to use a document ready handler in your prm_EndRequest function. Try this instead:
function prm_EndRequest(sender, args) {
//Hide the loading image
var panelProg = $get('divImage');
panelProg.style.display = 'none';
//sort the table once retrieved from datatable from server
$("#table").dataTable({
"sScrollY": "400px",
"bPaginate": false
});
drawVisualization();
}
To make sure the Viz API code doesn't try to run before the API is finished loading, you should make sure to wrap whatever code you use to hook up the AJAX call to your button inside a callback from the google loader.