load google annotated chart within jquery ui tab content via ajax method -

I try to load a Google Annotated chart () inside a jquery ui tab using the content via AJAX method. I am doing ()

Instead, I use the default tab functionality, the code written code works fine:

  & lt; Div id = "tabs" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "# tab-1" & gt; Chart & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div id = "tabs-1" & gt; & Lt; Script type = "text / javascript" & gt; Google.load ('Visualization', '1', {'Package': ['Annotation Time']}); Google.setOnLoadCallback (drawChart); Function drawChart () {var data = new google.visualization.DataTable (); Data.addColumn ('Date', 'Date'); Data.addColumn ('number', 'cloudofinc.com'); Data.addColumn ('string', 'header'); Data.addColumn ('string', 'text') data.addColumn ('number', 'all customers'); Data.addRows ([[New date ('12 May 2010 '), 2,' 2 new users '' ', 3], [New date ('13 May 2010'), 0, undefined, undefined, 0] [New date ('May 14, 2010'), 0, undefined, undefined, 0],]); Var chart = New google.visualization.AnnotatedTimeLine (document.getElementById ('chart_users')); Chart.draw (data, {displayAnnotations: false, fill: 10, thickness: 1}); } & Lt; / Script & gt; & Lt; Div id = 'chart_users' style =' width: 100%; Height: 400px; '& Gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

But if I use the AJAX method for the jquery UI tab and point to partial for the tab, it does not work completely, renders the page and loads the chart When, the browser window becomes white. However, just before the ending of the chart (the chart is actually never displayed) you can see the tab partial flash. I have verified that the partial fact is loading properly without the chart.

  & lt; Div id = "tabs" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "ajax / tabs-1" & gt; Chart & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; Javascript is inside the HTML, so the script starts before it starts.  
 
 The HTML page is loading to the end and before the Google Visualization API loads. 
 
 In addition to this, I also do not find good in your case about using the jQuery UI tab with content loaded through Ajax. On the page you can read the following: 
 
 
 The HTML you need is slightly different than the one used for the static tab: one of the links pointing to current resources The list (from which the content loads) and any additional containers (unobtrusive!). 
 
 
 So I recommend making the easiest of all and using the  select   tab event  control.