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

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;