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

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!

Answers


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.


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)

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.


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!


Need Your Help

How do I configure a Java EE maven project in Eclipse?

eclipse maven java-ee-6

I know Maven pretty well, but I usually work with Netbeans, which makes it quite easy to deploy Java EE applications - and handle hot deployment of any changes.

simple search results page: if/else issues using localStorage variables and document.write

javascript html image radio document.write

working on a mini page for some homework and I'm stuck! What we've been told to do it to pull localStorage variables from a fake "registration" page we've made (which gets it's information from a u...