Databases
StackOverflow2013
Postsdbo
POload google annotated chart within jquery ui tab content via ajax method
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POload google annotated chart within jquery ui tab content via ajax method
    text
    copied!<p>I am encountering an issue with trying to load a google annotated chart (<a href="http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html" rel="nofollow noreferrer">http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html</a>) within a jquery ui tab using content via ajax method (<a href="http://jqueryui.com/demos/tabs/#ajax" rel="nofollow noreferrer">http://jqueryui.com/demos/tabs/#ajax</a>).</p> <p>If instead I use the default tabs functionality, writing out the code things work fine:</p> <pre><code>&lt;div id="tabs"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#tabs-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', {'packages':['annotatedtimeline']}); 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 Clients'); data.addRows([ [new Date('May 12, 2010'), 2, '2 New Users', '', 3], [new Date('May 13, 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; </code></pre> <p>But if I use the ajax method for jquery ui tab and point to the partial for the tab, it doesn't work completely. The page renders and once the chart loads, the browser window goes white. However, you can see the tab partial flash just before the chart appears to finish rendering (the chart never actually displays). I have verified that the partial is indeed loading properly without the chart.</p> <pre><code>&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; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload