Interesting quirk with Google AnnotatedTimeline

Question

So I'm building a web app that makes use of various jQuery UI widgets. In particular I'm using the accordion widget. I have the jQuery code which sets up the accordion like so:

$('#graph').accordion({autoHeight:false, collapsible:true});

What goes in there is, obviously, a graph. For the graph I'm using the Google AnnotatedTimeline visualization. Now, if I set an accordion option active to false OR if the accordion is collapsed, whenever I try to draw the graph, it tells me the element it's looking for isn't there. Is this because internally the div that is containing the graph becomes 'hidden' when the accordion is collapsed? If so, how can I fix that?

The reason this is important is that the user might have that accordion collapsed while working with other elements. The graph is intended to update in realtime. But if it can't even find the element it needs to draw the graph, it won't be updated.

Answer 1

I did figure out that the accordion does indeed set the width and height of any contained divs to 0. Thus when I tried to access it through the AnnotatedTimeline, it couldn't find a valid width or height and threw and error. So my solution was to simple add a change callback function to redraw the graph when it is selected and reset my update interval. When it gets deselected, I simply clear my update interval.

Answer 2

It would be useful if you could illustrate/reproduce this problem using jsfiddle.

From looking at your question, it seems that you're defining an element with id 'graph' and making it a jquery ui accordion $('#graph').accordion({..}). What element are you attempting to insert the chart to? Assuming the div you're planning on having the chart in exists before you attempt to render the chart, you should at least not get errors in that regard.

A second related note I'd add is that for an annotated time series chart (docs), you must explicitly set a width and height for the chart.