Plotting in display: none elements

[GoogleCodeExporter]

I am using flot to plot realtime data updated every second by Ajax and it 
works great. I have multiple plots in tabbed panes that are being updated. 
In order to get this to work I had to use the "offleft", hack which 
positions the non-showing tabbed panes off screen:

   .ui-tabs .ui-tabs-hide {
    position: absolute;
    left: 1000em;
    } 
rather that the default:

    .ui-tabs .ui-tabs-hide { display: none !important; }

Everything works fine, but it is kind of ugly having the scroll bar at the 
bottom of the screen, and being able to scroll over and see the "hidden" 
tabs. Without the hack, flot dies because it gets 0 width and height for 
the pane with the display:none property.

I tried  changing the property display: none, dynamically to "block" 
before updating the chart, but couldn't get this to work.  

It would be nice if flot would allow plotting to "hidden" divs, even if 
this meant providing plot diminsions as an option.

Original issue reported on code.google.com by bensprac...@gmail.com on 2 Dec 2009 at 3:06

[GoogleCodeExporter]

Hello,

What I did was to plot the graph first, before doing any $().tabs();

Original comment by hantu...@gmail.com on 3 Dec 2009 at 2:33

[GoogleCodeExporter]

I am plotting real time data so I can't plot before doing teh $().tabs(); call. 
I 
was able to get around the problem by checking the parent of the div that holds 
the 
plot to see if it had the display:none attribute set.  If display:none is set, 
then 
I simply skipped the plotting, but still push the new data into the plot data 
array.  When the tab is selected, the chart gets plotted without missing any 
real 
time data.

The problem I am dealing with now is a memory leak with IE, which I will post 
another issue on.

Original comment by bensprac...@gmail.com on 3 Dec 2009 at 4:30

[GoogleCodeExporter]

If you are still having a problem with your plot within the tabs you may 
consider 
moving the $.plot() jQuery to a separate .js file and then ajax the jQuery 
using 
$.getScript() within the tab you wish. 

I had to do this to get flot to work the way I wished. I know its ajaxing to 
ajax but 
it worked.

This way you also wont have to use the off left hack.

Original comment by CALoc...@gmail.com on 5 Jan 2010 at 5:21

[GoogleCodeExporter]

You also need to set labelWidth/labelHeight, but yeah it would probably be 
worthwhile
to do something here as it is a point that people often have trouble with. I 
know
there was a guy on the mailing list experimenting with getting the width and 
height
out of CSS.

I'm going to mark this as an enhancement, patches are welcome.

Original comment by olau%iol...@gtempaccount.com on 15 Apr 2010 at 5:18

• Changed title: Plotting in display: none elements
• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

I know this is old, but Comment 3 really saved my life =)

Original comment by pfjarsc...@gmail.com on 6 Jul 2011 at 7:57

[GoogleCodeExporter]

Original comment by dnsch...@gmail.com on 7 May 2012 at 11:20

• Changed state: Accepted