1

I have 2 Google charts on my web page which are inside 2 separate items of a Bootstrap 3 Carousel. The chart that's on the active item (Slide 1) in the carousel shows up on the screen just fine however the chart that's not on the active list (Slide 2) doesn't show up even when the 2nd slide is active.

The relevant HTML is as follows:

 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <div id="piechart" class="col-sm-6 col-md-6 col-lg-12" style="height: 500px;"></div>
        </div>
        <div class="item">
            <div id="piecharts" class="col-sm-6 col-md-6 col-lg-12" style="height: 500px;"></div>
        </div>
        <div class="item">
            <div id="piechartss" class="col-sm-6 col-md-6 col-lg-12" style="height: 500px;"></div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

and the JS is as follows:

<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
          alert('Helo');
          var data = google.visualization.arrayToDataTable([
              ['CreditorName', 'Balance Amount'],
          @For Each item In Model
              @:['@item.CreditorName', @item.BalanceAmount],
          Next
          ['Et',    0]
        ]);

        var options = {
          title: 'Creditors share in total debt.'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
</script>

for slide 2 I am not sure when to call it but right now I am using this:

$(document).ready(function () {

    $('#carousel-example-generic').on('slide.bs.carousel', function () {
        // do something…
        loadCharInfo(this);
    })

});

and the loadChartInfo is: 

function loadChartInfo(carouselId)
{

    //google.setOnLoadCallback(drawCharts);
        google.load("visualization", "1", { packages: ["corechart"] });
        var data1 = google.visualization.arrayToDataTable([
      ['Chart2Q', 'Amount'],
      ['Chart2-1', 10000],
      ['Chart2-2', 10000],
      ['Chart2-3', 10000]
        ]);

        var options1 = {
            title: 'Chart 2.'
        };

        var chart1 = new google.visualization.PieChart(document.getElementById('piecharts'));

        chart1.draw(data1, options1);
}

I am pretty sure the chart 2 is being loaded properly as when I move the slide I can see a glimpse of the second chart as its in the process of sliding.

Muqeet Khan
  • 2,094
  • 1
  • 18
  • 28
  • No js is included in your question. Also, are the piechart(s,ss) div's supposed to be empty? – Macsupport Sep 12 '14 at 17:30
  • I am sorry. There was some problem it never updated the whole question. I have updated the question now. Hope that helps. – Muqeet Khan Sep 12 '14 at 17:32
  • You should probably set your callback on the `slid.bs.carousel` event instead of the `slide.bs.carousel` event. – cvrebert Sep 12 '14 at 19:36
  • Thank you that did it. I should have gone through the whole documentation first :-) ... Could you propose the same as answer and I will check it as answer. Thanks! again. – Muqeet Khan Sep 12 '14 at 20:15
  • @MuqeetKhan Would you please look into my problem, I have similar issues https://stackoverflow.com/questions/66868972/loading-multiple-google-chart-inside-bootstrap-carousel?noredirect=1#comment118204544_66868972 – user4221591 Mar 31 '21 at 11:04

2 Answers2

0

You should probably set your callback on the slid.bs.carousel event instead of the slide.bs.carousel event. The former is fired after the sliding and CSS transition have completed. The latter fired as soon as the sliding starts. The charting library needs its display area to be fully visible for it to be able to render, hence why you want the former.

cvrebert
  • 9,075
  • 2
  • 38
  • 49
  • Would you please look into my problem, I have similar issues https://stackoverflow.com/questions/66868972/loading-multiple-google-chart-inside-bootstrap-carousel?noredirect=1#comment118204544_66868972 – user4221591 Mar 31 '21 at 11:03
  • where is `slid.bs.carousel` in the given code block? – user4221591 Mar 31 '21 at 11:05
0

I had a somewhat similar issue using Frappe Charts inside a Bootstrap v5 carousel. 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;
}
jottin
  • 241
  • 1
  • 9