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

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!

asgallant asgallant · Accepted Answer · 2014-03-27T18:30:13

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.

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

code for google chart (this works - verified it standalone):

code for loading image when pressing a submit button

1 Answers