loading multiple google chart inside bootstrap carousel

Question

I have created a bootstrap carousel to illustrate the data of our company. In this carousel, I have bootstrap table, pics and two google charts (pie chart and stacked bar chart).

If I do not keep active class for the google chart they are not loading properly, sometimes chart size is changed or sometimes legend are not shown. If I make pie chart active then it work fine but then stacked chart shows problem like legend missing and if I make stacked chart active then pie chart shows problem. Why is it so?

<head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>   
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['STATES', 'MONTHLY REVENUE'],
            ['1',     557988],
            ['2',      723948],
            ['3',       1157887]
            ]);

        var options = {
            title: 'MONTHLY REVENUE',
            is3D: true,
            pieSliceText: 'value',
            fontSize: 15,
            chartArea: {
            left: "3%",
            top: "10%",
            height: "90%",
            width: "90%"
    },
        legend: {position: 'labeled'}   
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script> <!-- google pie chart ends  -->
    
<!-- google slack chart -->
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart_);
      function drawChart_() {
      var data = google.visualization.arrayToDataTable([
            ['STATES', 'MALE', 'FEMALE', { role: 'annotation' } ],
            ['1', 240680, 317308, ''],    
            ['2', 292141, 431807, ''],
            ['3', 401784, 756103, '']
      ]);
      
      var view = new google.visualization.DataView(data);
      

      var options = {
        title: "POPULATION",
        width: 1100,
        height: 650,
        legend: { position: 'top', maxLines: 5, textStyle: {fontSize: 15} },
        bar: { groupWidth: '90%' },
        isStacked: true
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
      }
    </script>
<!-- google slack chart ends  -->

        
   </head>
   <body>
   <div class="d-flex flex-lg-column mb-3">
                   <div class="p-2 bg-info">
                     <div id="carouselBigImage" class="carousel slide carousel-fade" data-ride="carousel">
                        <div class="carousel-inner">
                           
                           <div class="carousel-item">
                                <div class="table-responsive-lg table-bordered">
                                    <table class="table" style="font-weight: bold;font-size: 20px;caption-side:top;">
                                    <!-- table data  -->
                                        
                                </div>
                           </div>
                           
                           <div class="carousel-item active">
                               <div id="piechart_3d" style="width:100%; height:650px;"></div>
                           </div>
                           <div class="carousel-item ">
                               <div id="barchart_values" style="width:100%; height:650px;"></div>
                           </div>
                           <div class="carousel-item">
                              <img class="d-block w-100" src="Offc.png" >
                           </div>
                        </div>
                     </div> 
                  </div> <!-- p-2 bg-info -->
                 
               </div> <!-- d-flex flex-lg-column mb-3 closed -->
   
   
   </body>

this is the result of the chart being drawn in a hidden container, need to wait until the chart is shown before drawing for the first time. — WhiteHat, Mar 30 '21 at 11:36
@WhiteHat Thank you for the comment. But I did not understand your reply. Please can you elaborate it more. That will of great help. — user4221591, Mar 31 '21 at 04:53

score 0 · Answer 1 · answered Mar 31 '21 at 14:21

couple things...

google charts only needs to be loaded once per page load,
not once per chart drawn.
the chart cannot properly calculate placement of chart elements when drawn in a hidden container.
here, the charts are in a hidden container until shown by the carousel.
so you need to wait until the chart is shown before drawing for the first time.
to do so, you can use the "on slid" event --> 'slid.bs.carousel'

see following snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // pie chart
  var dataPie = google.visualization.arrayToDataTable([
    ['STATES', 'MONTHLY REVENUE'],
    ['1',     557988],
    ['2',      723948],
    ['3',       1157887]
  ]);

  var optionsPie = {
    title: 'MONTHLY REVENUE',
    is3D: true,
    pieSliceText: 'value',
    fontSize: 15,
    chartArea: {
      left: '3%',
      top: '10%',
      height: '90%',
      width: '90%'
    },
    legend: {position: 'labeled'}
  };

  var chartPie = new google.visualization.PieChart(document.getElementById('piechart_3d'));

  // bar chart
  var dataBar = google.visualization.arrayToDataTable([
    ['STATES', 'MALE', 'FEMALE', { role: 'annotation' } ],
    ['1', 240680, 317308, ''],
    ['2', 292141, 431807, ''],
    ['3', 401784, 756103, '']
  ]);

  var viewBar = new google.visualization.DataView(dataBar);

  var optionsBar = {
    title: 'POPULATION',
    width: 1100,
    height: 650,
    legend: { position: 'top', maxLines: 5, textStyle: {fontSize: 15} },
    bar: { groupWidth: '90%' },
    isStacked: true
  };

  var chartBar = new google.visualization.BarChart(document.getElementById('barchart_values'));

  // carousel slid event
  $('#carouselBigImage').on('slid.bs.carousel', function (sender) {
    // draw chart that is shown
    var container = $(sender.relatedTarget).find('div');
    switch (container.prop('id')) {
      case 'barchart_values':
        chartBar.draw(viewBar, optionsBar);
        break;

      case 'piechart_3d':
        chartPie.draw(dataPie, optionsPie);
        break;
    }
  });
});

score 0 · Answer 2 · answered Mar 22 '23 at 16:05

Some charting libraries have an issue displaying multiple charts inside a Bootstrap carousel. In order to get the proceeding slides to render the chart, I just changed the css that controls the bs slider to not use "display: none;". Instead, use "visibility: hidden;" which will allow the chart to be rendered while not being visible. The visibility property allows the element to take up space despite being hidden.

.myclass .carousel-item {
  display: block; /* allow charts to render offscreen */
  visibility: hidden;
}
.myclass .carousel-item.active {
  visibility: initial;
}

loading multiple google chart inside bootstrap carousel

2 Answers2

Linked