Column Charts within Bootstrap 4 Carousel - CanvasJS JavaScript Charts

Column Charts within Bootstrap 4 Carousel - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  
  <div id="chart-carousel" class="carousel slide" data-ride="carousel">
 
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="carousel-item active">  
      <div id="chartContainer1" class="chart" style="width:100%;height: 1200px"></div>
    </div>
    <div class="carousel-item">
      <div id="chartContainer2" class="chart" style="width:100%; height: 300px"></div>
    </div>
    <div class="carousel-item">
     <div id="chartContainer3" class="chart" style="width:100%; height:300px;"></div>
    </div>
  </div>
 
 <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#chart-carousel" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#chart-carousel" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div> <!-- Carousel -->

JavaScript

var charts = [];
var chart;

$('.carousel').carousel({
  interval: 2000
});

$('.carousel').on('slide.bs.carousel', function(e) {
 $(".carousel-inner").height(parseFloat(charts[e.to].container.style.height)); 
});

$('.carousel').on('slid.bs.carousel', function(e) {
  charts[e.to].render();
});

var chart1 = new CanvasJS.Chart("chartContainer1",
                                {
  title:{
    text: "Column Chart 1"
  },
  data: [{        
    type: "column",
    dataPoints: [
      { x: 10, y: 171 },
      { x: 20, y: 155},
      { x: 30, y: 150 },
      { x: 40, y: 165 },
      { x: 50, y: 195 },
      { x: 60, y: 168 },
      { x: 70, y: 128 },
      { x: 80, y: 134 },
      { x: 90, y: 114}
    ]
  }
        ]
});
chart1.render();
charts.push(chart1);

var chart2 = new CanvasJS.Chart("chartContainer2",
                                {
  title:{
    text: "Column Chart 2"
  },
  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}
    ]
  }
        ]
});
charts.push(chart2);

var chart3 = new CanvasJS.Chart("chartContainer3",
                                {
  title:{
    text: "Column Chart 3"
  },
  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}
    ]
  }
        ]
});
charts.push(chart3);