title: drawing flot chart inside bootstrap tab issue
body: <p>I am trying to use a <strong>flot chart</strong> inside of a bootstrap tab, all though the javascript doesn't draw the chart correctly, its getting drawn distorted, the texts are too close to the graph..</p>
  
  <pre><code>&lt;div id="tab3" class="tab-pane fade"&gt;
  &lt;div class="chart_flot" style="width:600px;height:300px;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Outside of the tab, the chart works fine. I've tried playing with around with css, but the only solution I've found is NOT setting the tabs style ( display:none ) as default , before tab selected, for example:</p>
  
  <pre><code>&lt;div id="tab3" class="tab-pane fade" style="display:block"&gt;
  &lt;div class="chart_flot" style="width:600px;height:300px;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried to set display:block on the tab that is used for the chart, and the graph got drawn fine but on other tab selection the canvas wouldn't disappear .</p>
  
  <p><strong><em>Solution.</em></strong></p>
  
  <p>I remind that this is a chart inside bootstrap default tabs bug.
  The reason it has been drawn distorted is because the chart cannot be drawn correctly in a hidden div <strong>( display:none )</strong> .</p>
  
  <p>There are 3 options fixing this issue. </p>
  
  <ol>
  <li>Add a javascript trigger that will draw the chart ONLY after the tab
  with the chart selected.</li>
  <li>Do not use bootstrap and just make own tabs script that will hide
  the tabs on load and not have display:none as default on non
  selected tabs.</li>
  <li><p>Easy way, with css</p>
  
  <pre><code>#tabid {
      width:0;
      display:block;
      visibility:hidden;
      height:0;
  }
  #tabid.active {
      width:100%;
      height:100%;
      visibility:visible;
  }
  </code></pre></li>
  </ol>
  
  <p>I hope this is going to be useful for some people.</p>