Can I place the charts in jQuery tab?

Comments

• 
  Martynas Majeris November 02, 2012 13:51

  Absolutely.

  However there is one caveat: the chart cannot properly calculate its container's size if it's hidden. Therefore you will need to employ your tab control event scheme to call chart.invalidateSize() whenever the tab with the chart is activated.

  Here's a live demo showcasing just that using jQuery UI Tabs:

  http://jsfiddle.net/amcharts/nQJNN/

• 
  Ravi Teja Juvvadi November 23, 2012 08:01

  Can i use dojo tabs instead of jquery

• 
  brewersassoc March 24, 2014 17:03

  Can you confirm this should also work with ammaps.js? I get the following error when I try to invalidateSize on a map:

  TypeError: Object #<HTMLDivElement> has no method 'invalidateSize'

   

  Perhaps I need to include another .js library to enable this feature?

• 
  Daniel McQuillen November 25, 2014 05:25

  I'm successfully updating a chart that I've placed in a tab. However, the sizing isn't quite right. Is there something else I should do beyond calling invalidateSize()?

  I'm using the "activate" event rather than the "select" event as shown in your fiddle code, since it seems that "activate" is the event listed in the JQuery docs: http://api.jqueryui.com/tabs/#event-activate

  I've attached a screenshot of what I'm seeing. 

  Here's the html code I'm using for my tabs. (I'm using the Avant dashboard theme.)

   

  <div id="tabs" class="tab-container tab-danger">

  <ul class="nav nav-tabs">
  
  <li class="active" ><a href="#plant-loads-tab" data-toggle="tab">Plant Loads</a></li>
  
  <li ><a href="#plant-efficiency-tab" data-toggle="tab">Plant Efficiency</a></li>
  
  </ul>

  <div class="tab-content" style="background:#fff;">

  <div class="tab-pane active" id="plant-loads-tab" style="height:470px;">
  
  <div id="site-statistics" style="height:450px;"></div>
  
  </div>

  <div class="tab-pane" id="plant-efficiency-tab" style="height:470px;">
  
  <div id="plant-efficiency" style="height:450px;"></div>
  
  </div>

  </div>

  </div>

   

   

   

   

   

   

   

   

• 
  Daniel McQuillen November 25, 2014 05:32

  ...here's what I see when I have this chart in the first tab. Note the sizing is correct.