0

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.

Perley
  • 292
  • 1
  • 3
  • 12
  • so you are trying to draw the graph when it is collapsed? that doesn't really make sense. you should draw the graph when it is visible. its useless to draw the graph when it is hidden. who can see it??? – c0deNinja Aug 03 '12 at 17:40
  • true I guess that makes sense. But it that what's happening? I'm not expert on the jQuery UI, but if that's the case then that is an easy fix. I was just curious if that was the reason why it wouldn't draw the graph when the accordion was collapsed. – Perley Aug 03 '12 at 17:42
  • yeah... not sure. someone will prob give you a good answer. but i remember running into the same issue when the accordion is collapsed... no access to contents. – c0deNinja Aug 03 '12 at 17:45
  • funny thing is, it doesn't have an issue when I try to draw a table or muck about with other html elements in other collapsed tabs. Just the graph. I suppose it's partly because the AnnotatedTimeline need an explicit width and height and if the element is collapsed I'd imagine that the accordion sets those properties to 0 and it doesn't like drawing things with a width/height = 0. – Perley Aug 03 '12 at 17:52

2 Answers2

0

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.

oli
  • 3,541
  • 1
  • 27
  • 34
0

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.

Perley
  • 292
  • 1
  • 3
  • 12