Load Morris.js graph in active tab (bootstrap)

Question

I have 2 tabs with 1 morris.js graph in each. The Graph in the first (active) tab loads perfectly, but the graph in the second tab doesn't load (strange result in Chrome, nothing in Firefox).

See jsbin: http://jsbin.com/canajije/1/edit

<div class="row">   
<ul class="nav nav-tabs nav-justified">
  <li ><a href="#a" data-toggle="tab">Tab A</a></li>
  <li><a href="#b" data-toggle="tab">Tab B</a></li>
</ul>

<div class="tab-content col-sm-12" >
   <div class="tab-pane active" id="a">
       <div id="tab-a" style="height:200px;width:200px;"></div>
   </div>
   <div class="tab-pane" id="b">
     <div id="tab-b" style="height:200px;width:200px;"></div>
   </div>
</div>
  </div>

How to load both graphs correctly?

Answer 1

You need to use the master-branch of morris.js which has support for

redraw()

and call that on the event

shown.bs.tab

more info here: http://www.doidea.se/blog/morris-js-charts-in-bootstrap-tabs

or js-fiddle: http://jsfiddle.net/rbsthlm/vbfzr/

Answer 2

Make both tabs active and then:

$('.nav-tabs li a').last().tab('show');
$('.nav-tabs li a').first().tab('show');

Answer 3

In my case none of the above solutions worked.

What worked for me was to use the jquery ui tabs instead (link). These worked like a charm.

Your code would only need slight re-writing.

BTW all the fiddles I've found that try to catch event 'shown.bs.tab' don't work anymore for some reason.