Highcharts & Bootstrap: Chart On Tab 2 Is Not Appearing. Though First Chart Is Working Fine

I am working on Highcharts. I also used Bootstrap for tabs. I have two charts, and each one of the chart I want to show in the different tab. Somehow I am getting correct first cha

Solution 1:

I've found the answer for the question I've asked above. Please find the solution below:

CSS

<styletype="text/css">.tab-content.tab-pane.highcharts-container {
          border: 0px;
      }

      .tab-content > .tab-pane {
        display: block;
        height: 0;
        overflow-y: hidden;
      }

    .tab-content > .active {
        height: auto;
    }

    .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus, .nav-tabs > .active > a:active {
        outline:none;
    }
    </style><styletype="text/css">#left, #right{
        float: left;
    }
    </style>

HTML

<divclass = "row-fluid"><divclass = "span9"><divclass = "row-fluid"><ulclass="nav nav-tabs"><liclass = "active"><adata-toggle = "tab"href = "#one">Chart 1</a></li><li><adata-toggle = "tab"href = "#two">Chart 2</a></li></ul><divclass="tab-content"><divclass="tab-pane active"id="one" ><divclass="left"id="left"style="width: 790px; height: 400px; margin: 0 auto"></div></div><divclass="tab-pane"id="two" ><br/><br/><br/><divclass="right"id="right"style="width: 790px; height: 400px; margin: 0 auto"></div></div></div></div></div></div>

And I am calling Highcharts inside some function usually. Have a small code snippet below. It is just to mention for few people how it is coming. Showing for only one chart only beginning.

JS

$('#left').highcharts({
              chart: {
                  type: 'column'
              },
              title: {
                  text: 'Some Title'
              },
              xAxis: {
                  type: 'category'
              },
              yAxis: {
                  title: {
                      text: ''
                  }
              }, // Like this further inputs for Highcharts.

NOTE: Above highchart code is only for demonstration and is incomplete.

I hope this solution will help. Thanks for your time guys.

Solution 2:

the problem is that the click event is triggered when you click inside the tab it self ...

if you want the chart to be reflowed when you clic on the tab navigation bar you need to add the click event listener for the element

$("a[href='#home']).click(function() {
     $('#left').highcharts().reflow();
});

$("a[href='#menu1']).click(function() {
     $('#right').highcharts().reflow();
});

because when bootstrap renders the tabs it will create the navigation bar for the tabs ... look at this picture for the html result ...

Solution 3:

Your problem is your click handlers; they are configured for when you click on the tab body and not the tab itself. So if you click on your blank area on tab 2, you will get your alert.

As I see it, you have 2 easy solutions for addressing this.

Solution 1 Update your tabs to have Id's and update your JavaScript click handlers appropriately.

HTML

<ulid="myTabs"class="nav nav-tabs"><liclass="active"><aid="home-tab"data-toggle="tab"href="#home">Quarterly</a></li><li><aid="menu-tab"data-toggle="tab"href="#menu1">Waterline</a></li></ul>

JS

$('#home-tab').click(function () {
    alert("left");
    $('#left').highcharts().reflow();
});

$('#menu-tab').click(function () {
    alert("right");
    $('#right').highcharts().reflow();
});

Solution 2

Use a single click handler that uses logic to determine what to do with the tabs.

HTML

<divclass="container"><ulid="myTabs"class="nav nav-tabs"><liclass="active"><adata-toggle="tab"href="#home"data-tableId="left">Quarterly</a></li><li><adata-toggle="tab"href="#menu1"data-tableId="right">Waterline</a></li></ul><divclass="tab-content"><divid="home"class="tab-pane fade in active">
      Home Tab
      <selectid="dropdown"><option>Portfolio</option></select><divclass="left"id="left"style="width: 790px; height: 400px; margin: 0 auto"></div></div><divid="menu1"class="tab-pane fade">
      Menu 1 Tab
      <divclass="right"id="right"style="width: 790px; height: 400px; margin: 0 auto"></div></div></div></div>

JS

$('#myTabs a').click(function(e) {
  e.preventDefault();
  $("#" + e.target.dataset.tableid)).highcharts().reflow();
  $(this).tab('show');
});

I think solution 2 is better because it allows you to have a single jquery function that can handle all tabs. It just requires an Id on your UL and a data attribute on each tab.

Solution 4:

Just throwing this up there with the new version of Highstocks. You can also call the tabs by using:

$(document).ready(function() {
        Highcharts.stockChart('right', {
            chart: {
                height: 600
            },

...
$(document).ready(function() {
        Highcharts.stockChart('left', {
            chart: {
                height: 600
            },