screenresize while dygraph is invisible is reseting its sizes to 0

[Siegfried De Bleeckere]

Hi all,

Dygraph looks really very promising and we intend to use it for all our trending, one glitch we found was when we put it in jquery tabs/panels...
I think dygraph misbehaves when it is in an invisible div and a resize occurs.

Procedure:
-open http://jsfiddle.net/tg2YM/
-look at the 2 tabs, the dygraphs are ok
-resize the screen
-go to the other tab
-dygraph is gone with size of 0,0

Is there something obvious we are missing?

Many thanks,

Siegfried

[Seema Kadian]

Hi, 

I am creating a proof of concept to use dyGraph in our application and found this exactly the same issue while resizing when the parent div is not visible. 

Can you suggest some fix for this? Most of the concepts are already well  implemented by dyGraph. I would be great if I can do this too.

Thanks,

Seema

[Dan Vanderkam]

Can you guys confirm whether you are running into this issue?
http://code.google.com/p/dygraphs/issues/detail?id=238

[Siegfried De Bleeckere]

Hi Danvk,

My issue is a little bit different, but I can reproduce the 238 issue as well. Probably it has the same cause and hopefully my info gives you more information.

conclusion:
-create dygraph in invisible div, show div -> does not work (size 0,0) (as in the bug report)
-create dygraph in visible div, hide div, show div -> does work correctly
-create dygraph in visible div, hide div, resize browser window, show dif -> does not work (size 0,0)  (that is what I found)

(in my jsfiddle example if you first create the tabs and then the dygraph (move last js line to the top) than you can reproduce bug 238 as well.
Should I add this to the bug report?

Thanks for your quick response.

Regards,

Siegfried

[Dan Vanderkam]

The issue here is that, when the dygraph div is invisible, its size
really is 0x0. There's no DOM event that dygraphs can listen for that
indicates when it becomes visible or resizes, so it can't resize
itself when it becomes visible without your help.

dygraphs _does_ listen for window.resize events, which tend to be
associated with most CSS resizes. But this isn't a perfect solution.
Google Maps and other JS libraries have a similar issue.

- Dan

[Siegfried De Bleeckere]

Hi Dan,

Thanks for your quick response.

I understand the root of the behaviour. We will help dygraph to get the right size when it comes visible manually.

Thanks again and kind regards,

Siegfried

[Nils Springob]

The following code triggers a manual update as workaround:

  var evt = document.createEvent('UIEvents');
  evt.initUIEvent('resize', true, false,window,0);
  window.dispatchEvent(evt);

[khw]

Perfect solution, thanks!

Under jquery tabs, you can use

tabs.on("tabsactivate", function() {  

   var evt = document.createEvent('UIEvents');

   evt.initUIEvent('resize', true, false,window,0);

   window.dispatchEvent(evt);

});

[Catia Matos]

I need to resize my graph inside my tabs. Can anyone tell me how to do this in angular? When i load the first time my graphs didnt show unless i move the window and resize it.. I need for the first time that it loads the graphs and fill the div for that..

My directive:

(function() {
    var app = angular.module('dashboard.view', []);

    app.directive('dygraph', function(){
        return {
            restrict: 'E',
            scope: {
                data    : '=',
                options : '=?'
            },
            template: '<div style="width: 100%"></div>',
            link: function (scope, elem, attrs) {
                scope.options.width = elem.parent()[0].offsetWidth;
                var graph = new Dygraph(elem.children()[0], scope.data, scope.options);
                /*if(scope.options.title=="Scanning" || scope.options.title=="Bytes" || scope.options.title=="Pakets"){
                    graph.ready(function(){
                        var width = this.graphDiv.clientWidth;
                        if(width==0)
                            width=1129;
                            graph.resize(width,320);
                    });
                }*/

            }        
        };
    });

If i do graph.resize it will appear on laod but if i change my tab the graph width is 0 again... Please help me!