Plotly chart height resize when using tabs
<p>I'm using Plotly library to create charts of my data. The issue that I'm encountering with is that when I tried to separate them in different tabs it's not resizing as it's suppose to do (just with the height, width is OK) except for the chart of the first tab, which works OK. </p>

<p>In my index.html I have the following structure:</p>

<pre><code>&lt;script type="text/javascript" src="{{STATIC_URL}}myindex.js"&gt;&lt;/script&gt;

&lt;ul class="nav nav-tabs"&gt;
  &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#var1"&gt;Var 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a data-toggle="tab" href="#var2"&gt;Var 2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="tab-content"&gt;
  &lt;div id="var1" class="tab-pane fade in active"&gt;

    &lt;div class="thumbnail parent_container" style="margin-top: 100px;"&gt;
      &lt;div class="thumbnail text-center chart"&gt;
          &lt;div id="chart1"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      ...
    &lt;/div&gt;

  &lt;/div&gt;

  &lt;div id="var2" class="tab-pane fade"&gt;

    &lt;div class="thumbnail parent_container" style="margin-top: 100px;"&gt;
      &lt;div class="thumbnail text-center chart"&gt;
          &lt;div id="chart2"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      ...
    &lt;/div&gt;

  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And myindex.js part that has to create the chart looks like this:</p>

<pre><code>$( document ).ready(function()
{
  "use strict";  

  var WIDTH_IN_PERCENT_OF_PARENT = 96;
  var HEIGHT_IN_PERCENT_OF_PARENT = 80;

  var chart1 = d3.select('div#chart1')
    .style({
        width: WIDTH_IN_PERCENT_OF_PARENT + '%',
        'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT)/2 + '%',
        height: HEIGHT_IN_PERCENT_OF_PARENT + '%'
    });

  var chart2 = d3.select('div#chart2')
    .style({
        width: WIDTH_IN_PERCENT_OF_PARENT + '%',
        'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT)/2 + '%',
        height: HEIGHT_IN_PERCENT_OF_PARENT + '%'
    });

  var chart1_node = chart1.node();
  var chart2_node = chart2.node();

  var time_Array = [];
  var var1_value = [];
  var var2_value = [];

  var data_var1 = [{
    x: time_Array,
    y: var1_value,
    ...
  }];

  var data_var2 = [{
    x: time_Array,
    y: var2_value,
    ...
  }];

  var layout_var1 = {
    xaxis: {...},
    yaxis: {...}
  };

  var layout_var2 = {
    xaxis: {...},
    yaxis: {...}
  };

  Plotly.plot(chart1_node, data_var1, layout_var1);
  Plotly.plot(chart2_node, data_var2, layout_var2);

  ...
});
</code></pre>

<p>I'm sure that it's having some issue with the tabs because when I first putted it all together it worked as a charm. I think that since they are being created since the beginning <code>$( document ).ready(function()...)</code> it's not giving the right height to the second chart. (The chart of the first tab resizes just fine.)</p>

<p>Right now I'm having trouble to found a reliable solution, so thanks in advance.</p>

<p>EDIT 1:</p>

<p>Well, I got it working in jsfiddle <a href="https://jsfiddle.net/Or10n/ba1o79LL/9/" rel="nofollow">plotly working with tabs</a>, so now I have even more doubts why it's not working. I'm using DJango 1.9.2. </p>