Div content resizing

Question

I have 3 different charts inside 3 different div tags that appear and hide when specified. However, two of the charts randomly resize and i know why. How do i fix this? I have wordpress and using visualizer plugin for my charts. have the code in the header.php file and in the text portion of the page specific code.

Code below:

Header.php snippet -

<script>
    var divs = ["Daily", "Weekly", "Monthly"];
    var visibleDivId = null;
    function toggleVisibility(divId) {
      if(visibleDivId === divId) {
        visibleDivId = null;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }
    function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if(visibleDivId === divId) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }
    }
</script>


HTML page snippet - 

<div class="inner_div"> 
<div id="Daily">[visualizer id="431"]</div>
<div id="Weekly" style="display: none;">[visualizer id="430"]</div>
<div id="Monthly" style="display: none;">[visualizer id="429"]</div>
</div>
<div class="main_div">
<div class="buttons">
<a href="#" onclick="toggleVisibility('Daily');">Daily</a> | <a href="#" onclick="toggleVisibility('Weekly');">Weekly</a> | <a href="#" onclick="toggleVisibility('Monthly');">Monthly</a>
</div>

Answer 1

A quick fix is to include call visualizer.render(); at the end of your toggleVisibility function:

function toggleVisibility(divId) {
  if(visibleDivId === divId) {
    visibleDivId = null;
  } else {
    visibleDivId = divId;
  }
  hideNonVisibleDivs();
  visualizer.render();
}

The problem is caused by invalid calculation of available area for divs that aren't visible at the time. Calling this method forces a re-calulcation of the svgs and ensures the right size.