dygraphs div not visible until browser Inspection window opened or browser resize

Question

This has plagued me for a week, so I had to come to SO. (Forgive the URL, it's a dev server). http://www.stagestudio.com.ua/shutter_stat/wiev_base.php?cat=34

when I click on the photo the popup with linechart should appear but in fact the linechart is non visible. It can be visible only after resize the window or open browser inspection window.

How can I fix this?

This method dont work <script> var graph = new Dygraph(document.getElementById("graphPanel"), "temperatures.csv", { animatedZooms: true }); $(document).ready(function () { graph.resize(800, 500) }); </scrip>

Answer 1

This is a known issue that comes up from time to time. If a <div> is invisible, then it doesn't have any well-defined height or width. So rendering a chart in it doesn't do anything useful (it has zero height). dygraphs has no way of knowing that the chart <div> has become visible. This is really a gap in the DOM Events API. Other libraries like Google Maps have similar issues.

Workarounds are:

• You can call .resize() without any parameters to force a redraw when the popup appears.
• You can create the chart when the popup appears, rather than on page load. This way it the chart <div> will have a size when the chart is rendered.
• You can assign the height and width explicitly, either in the dygraphs constructor or as styles on the chart <div>.

Answer 2

 // These will be zero if the dygraph's div is hidden. In that case,
  // use the user-specified attributes if present. If not, use zero
  // and assume the user will call resize to fix things later.
  this.width_ = div.clientWidth || attrs.width || 440;
  this.height_ = div.clientHeight || attrs.height ||320;