Morris.js chart not working inside of a bootstrap tab

Question

I have a situation where I am trying to use MorrisJS charts inside two different bootstrap tabs. The chart loads fine in the first (default) tab but when I click into the secon

Answer 1

I had the same problem and finally solved it. And just wanted to share. Hope it helps you!.

  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    var target = $(e.target).attr("href") // activated tab

    switch (target) {

      case "#bootstrap_tab_id": // bootstrap tab id

      $("#morris_chart").empty(); // destroy chart

      bar =  Morris.Donut({        // set chart
        element: 'morris_chart',
        resize: true,

        data: [
          {label: "Download Sales", value: 12},
          {label: "In-Store Sales", value: 30},
          {label: "Mail-Order Sales", value: 20}
        ]
      }); 

        bar.redraw();
        $(window).trigger('resize');
        break;
      default:
      $("#morris_chart").empty();

       break;
    }
  });