I'm using jquery and dygraphs to make a simple page with tabs for each dygraph plot.

When I resize the browser window, the active tab works fine but when I click the other tab the graph doesn't appear. If I resize the browser again, the missing graph will appear. I would like both graphs to appear in their respective tabs after resizing the browser once. Thanks in advance.

Fiddle: tabbed dygraph

HTML

<div class="profiles">
  <ul class="tabs">
   <li><a href="#graphdiv1">Profile 7</a></li>
   <li><a href="#graphdiv2">Profile 8</a></li>
  </ul>
 <div class="tabcontent">
  <div id="graphdiv1" class="tab"></div>
  <div id="graphdiv2" class="tab"></div>
 </div>
</div>

CSS

* {font-family: 'Segoe UI';}
.profiles .tabs {list-style: none; margin: 0 10px; padding: 0;}
.profiles .tabs li {list-style: none; margin: 0; padding: 0; display: inline-block; position: relative; z-index: 1;}
.profiles .tabs li a {text-decoration: none; color: #000; border: 1px solid #ccc; padding: 5px; display: inline-block; border-radius: 5px 5px 0 0; background: #f5f5f5;}
.profiles .tabs li a.active, .tabbable .tabs li a:hover {border-bottom-color: #fff; background: #fff;}
.tabcontent {width: 500px; border: 1px solid #ccc; margin-top: -1px; padding: 10px;}

Javascript

  g1 = new Dygraph(
    // containing div
    document.getElementById("graphdiv1"),
    // CSV or path to a CSV file.
    "Date,Temperature\n" +
    "2008-05-07,75\n" +
    "2008-05-08,70\n" +
    "2008-05-09,80\n"
  );
  g2 = new Dygraph(
    // containing div
    document.getElementById("graphdiv2"),
    // CSV or path to a CSV file.
    "Date,Temperature\n" +
    "2008-05-07,80\n" +
    "2008-05-08,75\n" +
    "2008-05-09,70\n"
  );
$(document).ready(function(){
    $(".profiles").find(".tab").hide();
    $(".profiles").find(".tab").first().show();
    $(".profiles").find(".tabs li").first().find("a").addClass("active");
    $(".profiles").find(".tabs").find("a").click(function(){
        tab = $(this).attr("href");
        $(".profiles").find(".tab").hide();
        $(".profiles").find(".tabs").find("a").removeClass("active");
        $(tab).show();
        $(this).addClass("active");
        return false;
    });
});

I'm using jquery and dygraphs to make a simple page with tabs for each dygraph plot.

When I resize the browser window, the active tab works fine but when I click the other tab the graph doesn't appear. If I resize the browser again, the missing graph will appear. I would like both graphs to appear in their respective tabs after resizing the browser once. Thanks in advance.

Fiddle: tabbed dygraph

HTML

<div class="profiles">
  <ul class="tabs">
   <li><a href="#graphdiv1">Profile 7</a></li>
   <li><a href="#graphdiv2">Profile 8</a></li>
  </ul>
 <div class="tabcontent">
  <div id="graphdiv1" class="tab"></div>
  <div id="graphdiv2" class="tab"></div>
 </div>
</div>

CSS

* {font-family: 'Segoe UI';}
.profiles .tabs {list-style: none; margin: 0 10px; padding: 0;}
.profiles .tabs li {list-style: none; margin: 0; padding: 0; display: inline-block; position: relative; z-index: 1;}
.profiles .tabs li a {text-decoration: none; color: #000; border: 1px solid #ccc; padding: 5px; display: inline-block; border-radius: 5px 5px 0 0; background: #f5f5f5;}
.profiles .tabs li a.active, .tabbable .tabs li a:hover {border-bottom-color: #fff; background: #fff;}
.tabcontent {width: 500px; border: 1px solid #ccc; margin-top: -1px; padding: 10px;}

Javascript

  g1 = new Dygraph(
    // containing div
    document.getElementById("graphdiv1"),
    // CSV or path to a CSV file.
    "Date,Temperature\n" +
    "2008-05-07,75\n" +
    "2008-05-08,70\n" +
    "2008-05-09,80\n"
  );
  g2 = new Dygraph(
    // containing div
    document.getElementById("graphdiv2"),
    // CSV or path to a CSV file.
    "Date,Temperature\n" +
    "2008-05-07,80\n" +
    "2008-05-08,75\n" +
    "2008-05-09,70\n"
  );
$(document).ready(function(){
    $(".profiles").find(".tab").hide();
    $(".profiles").find(".tab").first().show();
    $(".profiles").find(".tabs li").first().find("a").addClass("active");
    $(".profiles").find(".tabs").find("a").click(function(){
        tab = $(this).attr("href");
        $(".profiles").find(".tab").hide();
        $(".profiles").find(".tabs").find("a").removeClass("active");
        $(tab).show();
        $(this).addClass("active");
        return false;
    });
});

• javascript
• jquery
• dygraphs

2 Answers 2

dygraphs checks the size of the chart's containing <div> when you create the Dygraph object. If the div is hidden at that point, the size will be zero. When you change tabs, there's no event that the Dygraph object can listen to which will tell it that the div has changed size. It listens to window.onresize but, as you've discovered, you have to trigger that manually.

The solution is to tell the Dygraph object that it should check the size of its container div again when you switch tabs. You can do this via:

g.resize()

I had the similar issue. Solved it with as per danvk's answer. @danvk, I run into another issue with dygraph resizing in IE8 (specific to this browser). I have two dygraphs on my page and at one time only one of them is visible. If I resize window, the hidden dygraph also tries to resize itself internally with function resize(). And there I get exception that this.maindiv_.clientWidth is null or undefined. Actually, maindiv_ is null here. I would like to bring below dygraph changes for your consideration:

1. In Dygraph.prototype.resize the first line should be if (!this.maindiv_) return;
2. In createClipDiv method, the logical check should be if (area.w <= 0 || area.h <= 0) {return;}

If I make these two changes in dygraph.js, my page resizing works fine.

Can you please ment on this?