Hi everyone.
I’m having problems with graphs disappearing from view instead of updating when data is changed.
I’ve confirmed the behaviour on Brave, Chrome and Safari on MacOS running Catalina 10.15.6.
I created a very simple notebook to demonstrate the problem.
It might just be my incorrect use of the graphing library in Observable but the behaviour it seems strange enough to ask for help.
Thanks
Matt
Here’s a suggestion of how you can fix this: https://observablehq.com/compare/eaa32b8cbf09056e@66...66ee3af977a032c3@73
Demo:
Explanation: Th target div element, at first, is not yet attached to the DOM or rendered by the browser, so it has a width and height of 0. Then, it gets passed into Dygraph’s constructor, and Dygraph seems to be creating a graph with width 0 and height 0, the same as the target element. then, target get’s rendered to the screen, containing the graph that has width 0 and height 0, showing nothing.
The reason why the chart appears normal when you change the window dimension is because I assume that Dygraph watches for any width/height changes to the target element, and adjusts when it changes. So it’s initially 0x0, but when you change your window dimensions, then Dygraph get’s the correct non-zero sizes and displays the graph like normal.
The key fix in the suggestion is the yield target - that tells the Observable runtime to render the target div to the DOM first, which will initialize the width/height of the div correctly, before calling Dygraph(). I also changed i to a viewof element to make it a slider, to show the fix better.
Hope this helps!
Thanks so much, that makes a lot of sense!
I really appreciate you getting back to me so quickly 
.
Have a great Sunday.
Matt