Charts with BootStrap Accordion / Collapse with all accordions collapsed by default - CanvasJS JavaScript Charts

Charts with BootStrap Accordion / Collapse with all accordions collapsed by default - CanvasJS JavaScript Charts

by canvasjs

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<h3 align="center">CanvasJS Charts with Bootstrap Accordion / Collapse</h3>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-primary">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          Chart 1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <div id="chartContainer1" style="height: 300px; width: 100%;">
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-primary">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Chart 2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        <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"
  },
  zoomEnabled: true,
  data: [
    {
      type: "line",
      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 }
      ]
    }
  ]
});
chart2.render();


$('#collapseTwo').on("shown.bs.collapse",function(){
  chart2.render();
  // $('#collapseTwo').off(); // to remove the binded event after the initial rendering if needed
});

$('#collapseOne').on("shown.bs.collapse",function(){
  chart1.render();
  // $('#collapseOne').off(); // to remove the binded event after the initial rendering if needed
});