Dygraph not shown on collapsed jQuery mobile collapsible widget

Question

I have multiple dygraphs plots, which I would like to group in a collapsible jQuery widget, so that one could only show some groups of graphs. Sadly, this only works if the collapsible div is expanded at the start, if I start collapsed, the graph will not be drawn after expanding.

Although not a real solution, I could start with all all elements expanded. However, if the collapses some graphs and switches pages in between, they same problem occurs.

Here is a jsFiddle which shows the problem - set data-collapsed="false" and the graph will be drawn.

Answer 1

You might try calling g.resize() or g.updateOptions() on all the charts when the widget expands. These should be no-ops, but their effect is to force dygraphs to recalculate the size of its container <div>, which has changed due to the expanding widget.

To my knowledge, there's no way to tell from JavaScript when a DOM Element becomes visible or is resized in ways other than window resizes. This affects other JS libraries as well.