How to place Google Charts in Bootstrap tabs

Two Bootstrap3 tabs named RES and BUS have been created. Each tab contains two Google charts (Area and Pie charts). To position these charts within the tab-pane, a bootstrap row was added which was split into columns col-sm-9 (for the larger AreaChart) and col-sm-3 (for the smaller PieChart).

The content inside both BUS and RES tabs is identical, but the positioning on the second (RES) tab is mistaken. Why is this happening? And how can it be fixed?

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <div class="container">

      <div class="row text-center">

        <div class="col-sm-12">
          <div class="thumbnail">
          
          <h3>Title</h3>

<hr>

            <ul class="nav nav-tabs">
              <li class="active"><a  data-toggle="tab" href="#BUS">Bus</a></li>
              <li><a  data-toggle="tab" href="#RES">Res</a></li>
            </ul>

            <div class="tab-content">
              <div id="BUS" class="tab-pane active">
              
                <div class="row">
                  <h3>BUS title</h3>
                  <div class="col-sm-9">
                    <div id="AreaB1"></div>
                  </div>
                  <div class="col-sm-3">
                    <div id="PieB1"></div>
                  </div>
                </div><!-- .row -->

      <script type="text/javascript">

        function drawChartsB()
        {
          var view;

          var AreaOpt = {
            height: 200,
            legend: { position: 'bottom', maxLines: 1 },
          };

          var PieOpt = {
            height: 200,
            legend: { position: 'bottom', maxLines: 1 }
          };

          view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]]));
          view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]);
          (new google.visualization.AreaChart(document.getElementById('AreaB1'))).draw(view,AreaOpt);

          view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]]));
          (new google.visualization.PieChart(document.getElementById('PieB1'))).draw(view,PieOpt);
        }

        </script>   

              </div>
              <div id="RES" class="tab-pane">

                <div class="row">
                  <h3>RES title</h3>
                  <div class="col-sm-9">
                    <div id="AreaR1"></div>
                  </div>
                  <div class="col-sm-3">
                    <div id="PieR1"></div>
                  </div>
                </div><!-- .row -->  

      <script type="text/javascript">

        function drawChartsR()
        {
          var view;

          var AreaOpt = {
            height: 200,
            legend: { position: 'bottom', maxLines: 1 },
          };

          var PieOpt = {
            height: 200,
            legend: { position: 'bottom', maxLines: 1 }
          };

          view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]]));
          view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]);
          (new google.visualization.AreaChart(document.getElementById('AreaR1'))).draw(view,AreaOpt);

          view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]]));
          (new google.visualization.PieChart(document.getElementById('PieR1'))).draw(view,PieOpt);
        }

        </script>

              </div>
            </div><!-- .tab-content -->

          </div><!-- .thumbnail -->
        </div><!-- .col -->

      </div><!-- .row -->

    </div><!-- .container -->

    <script type="text/javascript">

      google.charts.load("current",{callback:drawChartsB,packages:["corechart"]});
      google.charts.load("current",{callback:drawChartsR,packages:["corechart"]});

    </script>

External JSFiddle: enter link description here

csstwitter-bootstrap-3google-visualization

Answer №1

To ensure the chart is drawn only when the container is visible, make sure to wait for visibility or adjust size settings in the chart options.

Additionally, it's recommended to call the load statement just once.

You can try setting up your code similar to the following:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div class="container">

  <div class="row text-center">

    <div class="col-sm-12">
      <div class="thumbnail">

      <h3>Title</h3>

      <hr>

        <ul class="nav nav-tabs">
          <li class="active"><a  data-toggle="tab" href="#BUS">Bus</a></li>
          <li><a  data-toggle="tab" href="#RES">Res</a></li>
        </ul>

        <div class="tab-content">
          <div id="BUS" class="tab-pane active">

            <div class="row">
              <h3>BUS title</h3>
              <div class="col-sm-9">
                <div id="AreaB1"></div>
              </div>
              <div class="col-sm-3">
                <div id="PieB1"></div>
              </div>
            </div><!-- .row -->

  <script type="text/javascript">

    function drawChartsB()
    {
      var view;

      var AreaOpt = {
        height: 200,
        legend: { position: 'bottom', maxLines: 1 },
      };

      var PieOpt = {
        height: 200,
        legend: { position: 'bottom', maxLines: 1 }
      };

      view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]]));
      view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]);
      (new google.visualization.AreaChart(document.getElementById('AreaB1'))).draw(view,AreaOpt);

      view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]]));
      (new google.visualization.PieChart(document.getElementById('PieB1'))).draw(view,PieOpt);
    }

    </script>   

          </div>
          <div id="RES" class="tab-pane">

            <div class="row">
              <h3>RES title</h3>
              <div class="col-sm-9">
                <div id="AreaR1"></div>
              </div>
              <div class="col-sm-3">
                <div id="PieR1"></div>
              </div>
            </div><!-- .row -->  

  <script type="text/javascript">

    function drawChartsR()
    {
      var view;

      var AreaOpt = {
        height: 200,
        legend: { position: 'bottom', maxLines: 1 },
      };

      var PieOpt = {
        height: 200,
        legend: { position: 'bottom', maxLines: 1 }
      };

      view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','A','B'],['2017M02',95,0],['2017M03',129,0],['2017M04',42,33]]));
      view.setColumns([0,1,{sourceColumn:1,role:"annotation"},2,{sourceColumn:2,role:"annotation"}]);
      (new google.visualization.AreaChart(document.getElementById('AreaR1'))).draw(view,AreaOpt);

      view = new google.visualization.DataView(google.visualization.arrayToDataTable([['X','AB'],['A',42],['B',33]]));
      (new google.visualization.PieChart(document.getElementById('PieR1'))).draw(view,PieOpt);
    }

    </script>

          </div>
        </div><!-- .tab-content -->

      </div><!-- .thumbnail -->
    </div><!-- .col -->

  </div><!-- .row -->

</div><!-- .container -->

<script type="text/javascript">

  google.charts.load("current",{callback:drawChartsB,packages:["corechart"]});

  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      switch ($(e.target).html()) {
        case 'Bus':
          drawChartsB();
          break;

        case 'Res':
          drawChartsR();
          break;
      }
  });

</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the position of the element by lifting it slightly

I am looking to adjust the positioning of the number "01 / 04" to match the layout shown in this image: https://i.sstatic.net/3MNA5.png Here is what I have accomplished so far: https://i.sstatic.net/6ayOx.jpg This is how the code structure looks like i ...

cssvue.jssass

My footer is now overlaying both my content and navbar

I am facing an issue with my footer. When I test my new footer, it ends up covering the content and navbar. I have been trying to figure out how to solve this problem but haven't had any luck yet. Hopefully, I can find some answers here... $(".toge ...

htmlcss

Tips for returning an element to its starting position following animation

Hey there, I’m fairly new to the world of HTML and CSS. Recently, I was working on creating a YouTube clone website and I’ve run into an issue with the navigation. On the official YouTube website, when you click on the hamburger menu icon, the naviga ...

javascripthtmljquerycssposition

Exclude specific IDs from Bootstrap 4 scrollspy functionality

I have consecutive sections, and in between them I have an aside without a corresponding anchor. The issue is that the scrollspy is active with the previous section. I want to adjust the scrollspy so that nothing is highlighted as active at that point, and ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Click to reveal additional images once the "show more" button is pressed

Hey there! I'm currently working on implementing a feature where, upon clicking "show more", 3 images will be displayed. And if the user clicks again, another set of 3 images will appear, and so on. I seem to be facing some difficulties with the JavaS ...

javascriptjqueryhtmlcss

Text alignment not applying within buttons despite using the !important tag

I am encountering an issue with input buttons in Bootstrap. Even after adding !important to the .text-left class, it does not work on buttons. How can this be resolved? .text-left { text-align: left !important; } .btn { box-shadow: none; ...

javascripthtmlcssbootstrap-4

The images mysteriously vanished from the page following some styling changes or plugin updates, leaving behind empty space. {Exploring Wordpress.org localhost environment,

INTRODUCTION In a recent project for a course, I took on the challenge of creating a simple WordPress theme using PHP in Notepad++. The initial setup went smoothly as everything worked fine. I proceeded to enhance the functionality by adding some plugins ...

phphtmlcsswordpressimage

Tips for vertically aligning elements within the body while excluding the navbar from being centered

On my webpage, I have a navigation bar and a lot of content. The code structure looks something like this: .container { display: flex; justify-content: center; align-items: center; } <div class="navbar"> <!-- Various links for navigation ...

htmltwitter-bootstrapcssflexbox

Exploration of jQuery Dropdown Menus

Encountering a problem with my dropdown menu. Check out the code here: http://jsfiddle.net/xY2p6/1/ It seems like a simple issue that I can't figure out, but as shown in the link, the functionality is not working properly. I need help linking the hid ...

jqueryhtmlcssdrop-down-menu

Tips for styling CSS for individual "ID" elements within a primary "Class" container

Struggling with crafting CSS code to style a specific HTML snippet. Take a look at the following HTML: <div class="FourSquares"> <div id="first"></div> <div id="second"></div> <div id="third"></div> ...

htmlcss

Is it possible to modify a website's CSS permanently using just the browser?

Is there a way to make changes to CSS in a large project using Firefox's built-in developer tools and have them saved permanently? I've been trying to edit the style sheets, but couldn't locate the specific property I needed. Since I can&apo ...

htmlcssfirefoxfirefox-developer-tools

Navigate through a specific div element

I am facing a dilemma with the following code: #points{ width:25%; background:#2a2a2a; height:20px; color:white; z-index:2; position:absolute; } #areas{ position:absolute; color:white; border-right:2px solid black; height:120%; ...

htmlcss

Tips for enlarging the font size of a number as the number increases

Utilizing the react-countup library to animate counting up to a specific value. When a user clicks a button, the generated value is 9.57, and through react-counter, it visually increments from 1.00 to 9.57 over time. Here's the code snippet: const { ...

cssreactjstypescript

Creating an interactive slideshow using jQuery and styling it with CSS

Upon downloading the script for a slider show, I encountered no issues. However, after implementing the slideshow, I faced problems with SEO optimization in HTML5. The code included <div u=""> or <img u="">, which resulted in an error message s ...

jquerycsshtmlseoslider

What is the reasoning behind beginning the transition with autofocus enabled?

After creating a contact form with autofocus="autofocus", a strange behavior was noticed. It seems that when the form has autofocus, the transition effect on the navigation bar is triggered in Firefox only. Is this an error on my end or just a bug specific ...

htmlcssfirefox

first item's grandchild selection

https://jsfiddle.net/jg69c3yf/1/ I don't have a lot of experience with CSS. My goal is to target the div with the class arrow-right, but only if it's inside the first child of a div with the class active. In this sample code, Only item 3 shoul ...

htmlcss

Issue with dropdown functionality in Hartl 3rd edition chapter 8, section 2.3

When I click on the "Account" link in the navbar, the dropdown menu is not appearing. Instead, a # is being added to the end of the URL, turning users/1 into users/1#. A similar question regarding the dropdown issue has been posted here: ruby on rails cha ...

javascriptcssruby-on-railstwitter-bootstrap-3

Our search box is showing suggested results but we are unable to access the specific product sku. What steps can we take to resolve this issue?

/* This is a global settings template for CSS. The code includes various styling rules for elements such as article, nav, form, header, and footer among others. There seems to be an issue with the CSS that may be affecting the functionality of a drop-down ...

csstemplatessearch-engine

Using HTML, CSS, and jQuery to create step-based scrollbar navigation

My current setup includes a horizontal scrollbar with products displayed inside. However, when I scroll to the right and then back, I can only see half of a product at a time. Is there a way to implement scrolling in increments of 200px using HTML/CSS/jQue ...

jqueryhtmlcssscrollscrollbar

Is the drag-and-drop feature not working properly?

I'm new to coding in Javascript and I'm attempting to insert an image inside a border created with CSS. Unfortunately, the script doesn't seem to be working properly. It's possible that there is a small error in the code causing the iss ...

javascriptjqueryhtmlcss