Chart init() false, alert with uncaught exception invalid dimensions for plot.

[GoogleCodeExporter]

I am using this FLOT with jQuery UI together.
The scenario is:
Say I have 5 tabs, each tab is another page url, so once I click the tab, 
will generate that page within the parent page by using jQuery UI. 
One of the tab contents the FLOT gantt chart, once I click this tab, it 
doesn't show up the chart, the settings are:
1. parent page -> contents all the <script> tags, which indicate the 
location of flot.js, jQuery-1.3.2. 
2. tab page -> contents script codes, all the functions. 
(I don't know whether I should set up in this way or not.)

Now, once I click the tab with chart, the firebug alerts me this:"uncaught 
exception: Invalid dimensions for plot, width = 0, height = 0", but if I 
will setup a refresh button on this single chart page, and once I click tab 
to generate tab page, there is no chart, and I click the button on this 
page, it then appears chart. 

Do u know what's going on here? Thanks very much!

Original issue reported on code.google.com by pri...@gmail.com on 11 Feb 2010 at 6:22

[GoogleCodeExporter]

it works fine if in a single page. Only thing is under the jQuery UI tab, it 
won't work 
well. :( 

Original comment by pri...@gmail.com on 11 Feb 2010 at 7:00

[GoogleCodeExporter]

Any one has idea why the flot doesn't appear in IE? and I run it on IE6+7+8, I 
got 
error report from IE and doesn't show the graphic~@@~

Original comment by pri...@gmail.com on 15 Feb 2010 at 3:27

[GoogleCodeExporter]

It's because when the tab is not displayed, its style is set to "display: none",
which has a width and height of zero.
Check this out => 
http://old.nabble.com/UI-Tabs-and-Flot-issue-td17212674s27240.html

I had the same problem with a set of tabs that have flot charts on 2 of the 4 
tabs
(loaded by ajax).
The solution I used is to modify my UI css file:
.ui-tabs-hide { position: absolute; left: 1000em; visibility: hidden;} 

It works in FF and IE8 ("compatibility" mode (eugh) to get Flot to plot), 
although
it's not perfect because of the resulting horizontal scroll bar.

Original comment by RacingHi...@googlemail.com on 23 Feb 2010 at 2:16

[GoogleCodeExporter]

Tabs is actually a FAQ:

Q: Flot doesn't work with [insert name of Javascript UI framework]!             

A: The only non-standard thing used by Flot is the canvas tag;                  
otherwise it is simply a series of absolute positioned divs within the          
placeholder tag you put in. If this is not working, it's probably               
because the framework you're using is doing something weird with the            
DOM, or you're using it the wrong way.       

A common problem is that there's display:none on a container until the          
user does something. Many tab widgets work this way, and there's                
nothing wrong with it - you just can't call Flot inside a display:none          
container as explained in the README so you need to hold off the Flot           
call until the container is actually displayed (or use                          
visibility:hidden instead of display:none or move the container                 
off-screen).

IE problems: check that you're including excanvas. Otherwise you probably got an
error in your Javascript, e.g. the dreaded extranous comma problem.

RacingHippo: Flot 0.6 shouldn't need to run in compatibility mode. You can 
perhaps
fix your scrollbar problem with a little help from a overflow: hidden 
container. Or
use left: -1000em - I think there's some kind of oddity where moving it 
off-screen to
one side won't show scrollbars.

If you've got further problems, please try the mailing list/forum, unless you're
pretty sure it's a Flot bug.

Original comment by olau%iol...@gtempaccount.com on 25 Feb 2010 at 9:15

• Changed state: Done

[GoogleCodeExporter]

I've found that the error seems to appear when you're using 'display: none', 
because
in that case the div literally doesn't exist for jquery. Using the css property
'visibility: hidden' (and to show it, you should change it to 'visibility: 
visible')
fixes the problem, at least in my case.

Original comment by pecor...@gmail.com on 1 Mar 2010 at 8:18

[GoogleCodeExporter]

I had this problem when implementing it with the JQTouch framework; a quick 
(albeit
dirty?) workaround I found was to use a setTimeout() to allow the <div> 
container to
initialize and load prior to plot running. I found 1500 milliseconds to be
sufficient, but that's going to be largely dependent on the page itself.

Might be an option to think about if you don't want to delve into the CSS of the
framework you're working with, if indeed you are building upon an existing 
framework.

Original comment by fergus.m...@gmail.com on 17 Mar 2010 at 10:00

[GoogleCodeExporter]

Original comment by dnsch...@gmail.com on 4 Jun 2012 at 2:52