Tabs with plotly charts

Trying to make plotly charts work in different tabs

by Ramón Carrasco Duboué

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.3/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://d14fo0winaifog.cloudfront.net/plotly-basic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#var1">Var 1</a></li>
  <li><a data-toggle="tab" href="#var2">Var 2</a></li>
</ul>

<div class="tab-content">
  <div id="var1" class="tab-pane fade in active">

    <div class="thumbnail parent_container" style="margin-top: 50px;">
	  <H3 class="text-center">Var 1</H3>
      <div class="thumbnail text-center chart">
          <div id="chart1">
          </div>
      </div>
    </div>

  </div>

  <div id="var2" class="tab-pane fade">

    <div class="thumbnail parent_container" style="margin-top: 50px;">
		<H3 class="text-center">Var 2</H3>
      <div class="thumbnail text-center chart">
          <div id="chart2">
          </div>
      </div>
    </div>

  </div>
</div>

CSS

div.parent_container
{
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 50px;
    background-color: transparent;
}

div.chart
{
    background-color: #ffffff;
    margin-left: 45px;
    margin-right: 45px;
    margin-top: 45px;
}

JavaScript

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 = [1, 2, 3, 4, 5];
  var var1_value = [6, 1, 9, 8, 5];
  var var2_value = [1, 8, 7, 2, 3];

  var data_var1 = [{
      x: time_Array,
	  y: var1_value,
	  name: 'Var 1'
  }];

  var data_var2 = [{
    x: time_Array,
    y: var2_value,
    name: 'Var 2'
  }];

  var layout = {
      xaxis: {titlefont: {size: 20}},
	  yaxis: {titlefont: {size: 20}}
  };

  Plotly.plot(chart1_node, data_var1, layout);
  Plotly.plot(chart2_node, data_var2, layout);