loading multiple google chart inside bootstrap carousel

user_4221591 0
Viewed 395

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>
bootstrap-carousel bootstrap-4 google-visualization html javascript
1 Answers

couple things...

  1. google charts only needs to be loaded once per page load,
    not once per chart drawn.

  2. 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;
    }
  });
});
user_50907710
Related