Wednesday, September 2, 2015

Morris Donut Charts place inside Bootstrap Tabs

While I was working with Morris Donut charts I faced a problem when placing this charts inside many tabs. It works in one page but not in tabs. So, here is the solution.

When placing Morris Donut Chart inside tabs we should call redraw() function. Chart/s in first tab will alright without calling redraw() function but for other tabs JS is not working properly without calling redraw().

Here is the code...
Download morris.js from following link
http://morrisjs.github.io/morris.js/


<!DOCTYPE html>
<html>
<head>
            <link href=".../morris.css" rel="stylesheet">
</head>
<body>

<!-- put below divs inside each Bootstrap nav-tabs -->

<div id="donut-snapshot"></div>
<div id="donut-style"></div>
<div id="donut-order"></div>

<script src=".../jquery-ui.min.js"></script>
<script src=".../raphael-min.js"></script>
<script src=".../morris.js"></script>

<!-- 1st tab chart - no need redraw()-->
<script>
    Morris.Donut({
        element: 'donut-snapshot',                               //js calls inside this id
        colors : ["#EC407A","#2196F3","#8BC34A","#AB47BC"],     //set colors for each bar
        resize : true,
        data   : [
            {label: "Completed", value: 52},
            {label: "Pending", value: 30},
            {label: "Delay", value: 20},
            {label: "Due", value: 20}
        ]
    });
</script>

<!-- 2nd tab chart - now call redraw()-->
<script>
    var graphStyle = Morris.Donut({
        element: 'donut-style',
        data: [
            {label: "Completed", value: 12},
            {label: "Pending", value: 30},
            {label: "Delay", value: 20},
            {label: "Due", value: 20}
        ],
        colors: ["#EC407A","#2196F3","#8BC34A","#AB47BC"],
         
    });
        $('ul.nav a').on('shown.bs.tab', function (e) {
            graphStyle.redraw();
    });
 
</script>

<!-- 3rd tab chart - again call redraw() -->
<script>
    var graphOrder = Morris.Donut({
        element: 'donut-order',
        data: [
            {label: "Completed", value: 12},
            {label: "Pending", value: 30},
            {label: "Delay", value: 40},
            {label: "Due", value: 20}
        ],
        colors: ["#EC407A","#2196F3","#8BC34A","#AB47BC"],
         
    });
        $('ul.nav a').on('shown.bs.tab', function (e) {
            graphOrder.redraw();
    });
 
</script>

</body>
</html>


                                                                        1st tab

2nd tab

3rd tab



Posted by at

7 comments:

  1. RahulFebruary 21, 2016 at 10:24 PM

    I was looking for this solution. Thank you so much. And it is true, when we place morris donut chart inside tabs, i.e. when we place two morris donut charts in each tabs, while we navigate it is not displaying. Using the above solution it is working.

    ReplyDelete
    Replies
    1. Praveen GoswamiMarch 17, 2016 at 5:59 AM

      Hello Rahul, can u help me out in html part of this as I m not able to see other tab data.

      Delete
  2. Praveen GoswamiMarch 17, 2016 at 5:58 AM

    Plz share html part as well as I m not able to understand this part . $('ul.nav a').on('shown.bs.tab', function (e) {
    graphOrder.redraw();
    });

    ReplyDelete
    Replies
    1. UnknownMarch 18, 2016 at 12:17 AM

      Hi Praveen, Here is the explanation that you've needed. I hope you got this.

      HTML explanation

      This is the Bootstrap tabs html. Inside each <a> tag, has initialised id which calls to relevant div should be shown.


      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active">
      <a href="#style" role="tab" data-toggle="tab">Style</a>
      </li>
      </ul>

      Inside the tab panes div, calls relevant donut chart by adding its id

      <!-- Tab panes -->
      <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="style">
      <div class="col-lg-12">
      <div id="donut-style"></div>
      </div>
      </div>
      </div>

      script explanation

      <script>
      var graphStyle = Morris.Donut({
      element: 'donut-style',
      data: [
      {label: "Completed", value: 12},
      {label: "Pending", value: 30},
      {label: "Delay", value: 20},
      {label: "Due", value: 20}
      ],
      colors: ["#EC407A","#2196F3","#8BC34A","#AB47BC"],

      });
      $('ul.nav a').on('shown.bs.tab', function (e) {
      graphStyle.redraw();
      });

      </script>

      ul.nav a - link of ul tag which has nav class
      shown.bs.tab - Occurs when the tab is fully shown
      graphStyle.redraw() - call redraw() function to assigned variable which Morris.Donut() calls

      Delete
  3. devender dagarJune 27, 2016 at 1:46 AM

    Facing problem with this code... tried twice but both the times same resullt :(

    ReplyDelete
  4. noNosCallemosAugust 23, 2016 at 11:47 AM

    This code is working fine to me, but for some reason, chart that call redraw() just draw half of the chart if you are using a col bigger that 6

    Anybody has the same problem?

    ReplyDelete
  5. UnknownApril 15, 2018 at 10:43 PM

    worked for me
    $('#baseVerticalRight1-tab6').on('click', function (e) {
    setTimeout(function(){
    morrisChart.redraw();
    },400);
    });

    interviewsortout.blogspot.in

    ReplyDelete

Subscribe to: Post Comments (Atom)