Hidden items do not load properly after display

Question

I have a tabbed statistics table in which there are 10 separate tabs containing charts. By clicking on each tab, a preload of the corresponding chart is displayed. However, it does not scale in the container. The stranger thing is that when I resize the window, the visible chart displays correctly (I assume that it does some recalculation). How can I change my code so that it performs this recalculation after a click or any suggestions on this issue?

Here is my jsfiddle: http://jsfiddle.net/g66ut7c6/

<!--BEGIN TABS--> <div class="tabbable tabbable-custom"> <ul class="nav nav-tabs"> <li> <a href="#tab_1_1" data-toggle="tab"> 1 </a> </li> <li> <a href="#tab_1_2" data-toggle="tab"> 2 </a> </li> <li> <a href="#tab_1_3" data-toggle="tab"> 3 </a> </li> </ul> <div class="tab-content"> <div class="tab-pane" id="tab_1_1"> <div class="scroller"> <div class="col-md-6 col-md-offset-3"> <div class="portlet light"> <p> Piechart by ülkeler </p> </div> </div> </div> </div> <div class="tab-pane" id="tab_1_2"> <div class="scroller"> <div class="col-md-6 col-md-offset-3"> <div class="portlet light"> <p> Piechart by step dağılımı </p> </div> </div> </div> </div> <div class="tab-pane" id="tab_1_3"> <div class="scroller"> <div class="col-md-6 col-md-offset-3"> <div class="portlet light"> <p> Piechart by hasta sayısı ay </p> </div> </div> </div> </div> </div> </div> <!--END TABS--> 

Before resizing

After resizing, size is ok

I could not include diagrams in my jsfiddle because they contain some ruby ​​code.

PS: Using Chartkick and Google Charts for charting and MetronicJS for tabs.

Edit: The first chart, which is visible by default, displays correctly, but the others do not. After resizing the window, when another graph is displayed, the previous one is again broken.

Answer 1

You can programmatically fire the "resize" event:

 window.dispatchEvent(new Event('resize')); 

Just attach it to the 'click' event in which the tab is displayed.

In your case:

 $('div.tabbable > ul > li > a').click( function() { window.dispatchEvent(new Event('resize')); }); 

If your component does not resize in response to the event, you can actually resize the window:

 window.resizeTo(width, height); 

UPDATE

If it is not possible to resize the window (see comments), you can try to redraw the chart when the tab becomes visible. Perhaps in this way the chart can correctly calculate the dimensions at which it should fit. Sort of:

 $( 'div.tabbable > ul > li > a' ).click( function() { myChart.draw( myData ); }); 

Hope this helps!