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.

Answer 2

I had the same issue. A different solution worked for me.

• Make sure you set the height and width
• Make sure flot is not looking for some div which DOES NOT exist. This was the case since I copied it from a page which had three plots, whereas I used the first and the third. I could locate it by using chrome's console (It crashed after not finding the second div in the page. Hence the third one was not being plotted. Just comment out the unused plotting in the js and it worked fine)

Answer 3

I had same issue under IE8 and sometimes Android, mine charts are initially hidden with toggle function and that caused the error trying to plot a chart inside a hidden div. CSS was already defined, so that did not help.

Moving jQuery hide and toggle code AFTER the plotting div elements solved the issue.

Answer 4

None of the above answers worked for me.

I solved it this way:

<div id="flot-line-chart-moving" style="width:500px;height: 200px;"></div>

We can fix the error by setting a width manually, but the problem is, width is hard-coded in the above code, and you don't always want to use 500px for your chart.

so after the chart is draws successfully we can set the width of the chart by jquery:

$('#flot-line-chart-moving').css('width','100%');

You also need to add

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

Answer 5

I had similar trouble when the div wasn't hidden. It would show a similar error in IE11. It took a long time to track down that the container needs to be a block element, i.e. display: block. Hope this helps someone waste less time than me!