Hidden elements are not loaded properly after being displayed - html

Question

I have a tabbed toggle statistic page, which has 10 separate tabs that include charts. By clicking each tab, preloaded corresponding chart is being showed up. However, it does not scale into its container. More weird thing is, when I resize the window, visible chart is shown properly (I suppose it does some recalculation thingy). How should I modify my code so that it does that recalculation thingy after a click, or any suggestions on the problem?
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 resize
After a resize, the size is okay
I could not include charts in my jsfiddle because they contain some ruby code.
PS: Using Chartkick and Google Charts to draw charts, and MetronicJS for tabs.
Edit: The first chart that is visible by default is being display properly initially, however others are not. After a resize of a window when another chart is visible, the previous one gets broken again.

Answer 1

You can programmatically fire the 'resize' event:
window.dispatchEvent(new Event('resize'));
Just attach it to the 'click' event that shows the tab.
In your case:
$('div.tabbable > ul > li > a').click( function() {
window.dispatchEvent(new Event('resize'));
});
If your component doesn't resize as respond to the event, you could actually resize the window with:
window.resizeTo(width, height);
UPDATE:
If it is not posible to resize the window (see comments) you could try to redraw the chart when the tab becomes visible. Maybe in that way the chart is able to calculate properly the dimensions it needs to fit in. Something like:
$( 'div.tabbable > ul > li > a' ).click( function() {
myChart.draw( myData );
});
Hope it helps!