Charts within BootStrap Tabs - CanvasJS JavaScript Charts

Charts within BootStrap Tabs - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
    <div class="col-md-offset-2 col-md-8">
        <ul class="nav nav-pills nav-jt">
            <li class="active"><a data-toggle="tab" id= "bs-tab1" 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="chartContainer1" style="height: 300px; width: 100%;"></div>
            </div>
            <div id="tab2" class="tab-pane">
                <div id="chartContainer2" style=" height: 300px; width: 100%;"></div>
            </div>
        </div>
    </div>
</div>

JavaScript

var chart1 = new CanvasJS.Chart("chartContainer1", {
  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}
      ]
    }
  ]
});
chart1.render();


var chart2 = new CanvasJS.Chart("chartContainer2", {
  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}
      ]
    }
  ]
});

$('#bs-tab1').on("shown.bs.tab",function(){
  chart1.render();
});

$('#bs-tab2').on("shown.bs.tab",function(){
  chart2.render();
});