2

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 chart in the first tab. But second tab is empty. Please find below my code.

HTML

<div class="container">
        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#home">Quarterly</a></li>
          <li><a data-toggle="tab" href="#menu1">Waterline</a></li>
        </ul>

        <div class="tab-content">
          <div id="home" class="tab-pane fade in active">
            <br/><br/>
            <select id="dropdown">
              <option>Portfolio</option>
            </select>
            <br/><br/><br/>
            <div class="left" id="left" style="width: 790px; height: 400px; margin: 0 auto"></div>
          </div>
          <div id="menu1" class="tab-pane fade">
            <div class="right" id="right" style="width: 790px; height: 400px; margin: 0 auto"></div>
          </div>
        </div>
      </div>

JS

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

Also, if you can see I've given alert messages also. It is not running at all? Though first tab is working fine.

Please suggest. TIA.

RESOLVED: From here: Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

Community
  • 1
  • 1
disp_name
  • 1,448
  • 2
  • 20
  • 46
  • I think I had a similar problem with bootstrap tabs a few weeks ago where bootstrap was stopping the click event from propagating correctly, so I had to manually show and hide the tabs. – drneel Feb 16 '16 at 19:41
  • Can you please explain you how you did that? It would be great!! – disp_name Feb 16 '16 at 19:47
  • Have you tried to call setSize like in related topics: http://stackoverflow.com/questions/16838758/highcharts-graph-width-is-incorrect-when-scrollbar-is-present-in-bootstrap-flui / http://stackoverflow.com/questions/17206631/why-are-bootstrap-tabs-displaying-tab-pane-divs-with-incorrect-widths-when-using – Sebastian Bochan Feb 17 '16 at 12:12
  • All, Thanks, it is resolved. Get more details here: http://stackoverflow.com/questions/17206631/why-are-bootstrap-tabs-displaying-tab-pane-divs-with-incorrect-widths-when-using – disp_name Feb 19 '16 at 05:32
  • 1
    If your problem is resolved, please post solution as an answer and accept it as the answer. – Kacper Madej Feb 19 '16 at 16:27
  • Sure @KacperMadej, thanks for suggestion. Let me share it real quick – disp_name Feb 19 '16 at 18:58

4 Answers4

3

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

CSS

<style type="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>
    <style type="text/css">
      #left, #right{
        float: left;
    }
    </style>

HTML

<div class = "row-fluid">
        <div class = "span9">
            <div class = "row-fluid">
                <ul class="nav nav-tabs">
                        <li class = "active">
                            <a data-toggle = "tab" href = "#one">Chart 1</a>
                        </li>
                        <li><a data-toggle = "tab" href = "#two">Chart 2</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="one" >
                            <div class="left" id="left" style="width: 790px; height: 400px; margin: 0 auto"></div>
                        </div>

                        <div class="tab-pane" id="two" >
                          <br/><br/><br/>
                          <div class="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.

disp_name
  • 1,448
  • 2
  • 20
  • 46
0

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 ...

tabs after render in bootstrap

reda igbaria
  • 1,444
  • 12
  • 15
0

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

<ul id="myTabs" class="nav nav-tabs">
    <li class="active"><a id="home-tab" data-toggle="tab" href="#home">Quarterly</a></li>
    <li><a id="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

<div class="container">
  <ul id="myTabs" class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home" data-tableId="left">Quarterly</a></li>
    <li><a data-toggle="tab" href="#menu1" data-tableId="right">Waterline</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      Home Tab
      <select id="dropdown">
        <option>Portfolio</option>
      </select>
      <div class="left" id="left" style="width: 790px; height: 400px; margin: 0 auto"></div>
    </div>
    <div id="menu1" class="tab-pane fade">
      Menu 1 Tab
      <div class="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.

drneel
  • 2,887
  • 5
  • 30
  • 48
0

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
            },
Fastidious
  • 1,249
  • 4
  • 25
  • 43