Skip to content


Plotting in display: none elements #347

dnschnur opened this Issue · 5 comments

1 participant

Flot member

Original author: (December 02, 2009 03:06:37)

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:

Flot member

From on December 03, 2009 02:33:55

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

Flot member

From on December 03, 2009 16:30:51
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.

Flot member

From on January 05, 2010 17:21:49
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.

Flot member

From on April 15, 2010 17:18:33
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.

Flot member

From on July 06, 2011 19:57:30
I know this is old, but Comment 3 really saved my life =)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.