Invalid dimensions for plot, width = 0, height = 400 inside of hidden tab

Question

I have this error when I insert charts in hidden tabs like second, third, etc. here is the error:

Invalid dimensions for plot, width = 0, height = 400 in js/jquery.flot.min.js:6.

I used bootstrap 2 and jquery:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

Here are the libraries:

<script src="js/jquery.flot.min.js"></script>
<script src="js/jquery.flot.pie.min.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>

And the css:

#plotarea
{
    max-width: none;
    height: 400px;
}
#pie 
{
    max-width: none;
    height: 400px;
}
#barmonth 
{
    max-width: none;
    height: 400px;
}
#baryear 
{
    max-width: none;
    height: 400px;
}

The div with the id of every chart(always change the id to the chart I need to show, like plotarea, pie, barmonth, baryear, etc):

<div id="plotarea"></div>

And I add this style to fix the width error .ui-tabs .ui-tabs-hide { left: -10000px; visibility: hidden !important; }, but even this the chart doesn't draw the charts inside of those hidden tabs only draw the first tab which is in the first view...can you now if there is a form to fix it?

I use the charisma template.

Best regards!

Answer 1

Well I already made it!

If you have this library <script src="js/jquery.flot.resize.min.js"></script>, you only need to change this inside of styles.css(the stylesheets file):

max-width: none;
height: 400px;

with this:

width: 100%;
height: 400px;

Now the charts always resize in every screen.