Question

I am having a problem with a canvas element. It does not show when it is in a hidden div and the div is toggled. better explanation and example here

http://jsfiddle.net/78sJT/10/

This is happening in ff and chrome (not tested others). Could anyone tell me why / how to overcome this issue.

Answer 1

The issue is that dygraphs detects the div’s width/height as 0/0 and doesn’t learn otherwise until it’s redrawn (there is no JS event which fires when an individual DOM element is resized).

The easiest workaround is to just explicitly let the dygraph know it should update its size and redraw itself after the div is toggled using g.resize();

    $(document).ready(function(){
      $('.click').click(function(){
        $('#hidden').toggle();
        g.resize();
      });
    });

I updated your jsfiddle http://jsfiddle.net/78sJT/13/