ie/chrome inspector causes redraw

Question

I have some charts/graphs that I'm using the google visualization api to display. Initially i have set the display of their container to none. Once the user clicks a button I use javascript to make the container's display property to block. I'm seeing two strange behaviors when I do this

1. When I do it this way, the charts display improperly( they are smaller in size which causes some of the text labels to run over each other or off the chart). However, if I don't turn the display property to none initially then they work just fine.

2. When the charts are messed up and I press F12 (either on ie or chrome) to open the inspector, these charts magically redraw themselves to the proper size again.

Is there a way to either fix the 1st issue or somehow use javascript to emulate the redraw that is happening when I open the inspectors?

Answer 1

Drawing charts inside hidden divs causes the Visualization API's dimension detection algorithms to break, which is why your charts are messed up. The fix is to draw the charts while the divs are visible, then hide the divs after the charts have drawn. You can use "ready" event handlers for your charts to accomplish this:

google.visualization.events.addListener(chart, 'ready', function () {
    document.querySelector('#myChartDiv').style.display = 'none';
});

Answer 2

You can try following options:

1) Change your container div's display property to '' (empty parenthesis) instead of block
OR
2) After you change the display property to block, force the window resize event.
You could use the jQuery resize() method, like this:

$(window).resize(); 

Answer 3

I tried to resize the window using scripts, but I found that some browsers did not support this. In the end, I ended up removing the container div from the DOM using jQuery and then appending it again when I wanted to display it. This preserved the correct sizes of the graphs

$tab3 = $('#tab3').remove();

then when I wanted to display it (the div of class panes is the original parent to the div of id tab3)

$('.panes').append($tab3);