Charts within BootStrap Tabs - CanvasJS JavaScript Charts

Charts within BootStrap Tabs - CanvasJS JavaScript Charts

by canvasjs

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div class="container">
    <div class="col-md-3">
        <ul class="nav nav-pills nav-jt">
            <li class="active"><a data-toggle="tab" href="#tab1">Chart 1</a></li>
            <li><a data-toggle="tab" id= "bs-tab2" href="#tab2">Chart 2</a></li>
        </ul>
        <div class="tab-content">
            <div id="tab1" class="tab-pane fade active in">
                <div id="chartContainer" style="height: 300px; width: 100%;"></div>
            </div>
            <div id="tab2" class="tab-pane">
                <div id="chartContainer1" style=" height: 300px; width: 100%;"></div>
            </div>
        </div>
    </div>
</div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
      title:{
      	text:"Chart 1"
      },  
      data: [
      {
        type: "column",
        dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55},
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14}
        ]
      }
      ]
    });
  chart.render();

  function chartTab2() {
    var chart1 = new CanvasJS.Chart("chartContainer1", {
      title:{
      	text:"Chart 2"
      },
      data: [
      {
        type: "column",
        dataPoints: [
        { x: 10, y: 58 },
        { x: 20, y: 35},
        { x: 30, y: 36 },
        { x: 40, y: 75 },
        { x: 50, y: 45 },
        { x: 60, y: 28 },
        { x: 70, y: 48 },
        { x: 80, y: 14 },
        { x: 90, y: 54}
        ]
      }
      ]
    });
    chart1.render();
  }

$('#bs-tab2').on("shown.bs.tab",function(){
      chartTab2();
      $('#bs-tab2').off(); // to remove the binded event after the initial rendering
  });