uncaught exception: Invalid dimensions for plot, width = 0, height = 0
Ruben Oliveira
I'm using flot in a relatively large project, where I am showing a
chart with a large number of points.
When I say large I'm refering to series with up to 50.000 points, and
let me congratulate the flot development team because the performance
is quite good!
However, I'm facing the following problem:
Some times, I get this message in firebug:
«uncaught exception: Invalid dimensions for plot, width = 0, height =
0»
Although the message is clear, the fact is that I protected my code as
much as possible to make sure that every time the plot method is
called, the container dimensions are specified. I have this for
granted, and whenever the problem happens, I check the dom (with
firebug) and the dimensions are specified on the container. I even
make sure, through the use of dom ready event, that the plot is called
only when container is available.
A couple of days ago, I searched for the problem on the flot code and
I
ended up suspecting that the problem might be related to some sort of
cache related with jquery. I'm not very experienced in jquery, the
project I'm working on uses YUI, so I'm not quite sure about this.
Does anyone have a clue about the cause of this behavour?
The construction of the chart is made within a class that does this:
1st: creates the page layout, including the chart placeholder
2nd: appends the layout on the DOM
3rd: adjusts the layout to the page body (in this process, dimensions
are specified for the chart placeholder)
4th: checks if the placeholder has its dimensions specified, and if it
doesn't specify it
5th: creates the chart only when the placeholder is available (using
the YAHOO.util.Event.onAvailable)
As you can see, the process is a bit redundant to make sure dimensions
are set for the placeholder.
George Roberts
display:none or visibility:hidden is set you will get this exact same error.
So in your code that double checks the size, please also check display and
visibility css styles.
I know this because many people try to draw the graph and then fade it in
with jquery. This doesn't work. The workaround is to make it visible but
position it left:-1000 so it is off the screen to the left. Draw the graph,
then make it invisible, position it properly, then fade it in.
- George Roberts
http://gr5.org
Ruben Oliveira
I'm sorry, I haven't mentioned that I've checked that issue after
reading all of the issues related with Invalid dimensions.
The placeholder is beeing created like this:
function createChartContainer (){
chartContainerReference = document.createElement("div");
chartContainerReference.setAttribute("id",
chartContainerId);
chartContainerReference.style.backgroundColor = "#616161";
chartContainerReference.style.position = "relative";
}
And then it has its dimensions defined like this:
function adjustChartContainer (){
chartContainerReference.style.height = Math.round(parseInt
(chartContainerReference.parentNode.style.height) -
chartNavigatorContainerHeight) + 'px';
chartContainerReference.style.width = Math.round(parseInt
(chartContainerReference.parentNode.style.width)) + 'px';
if(myObj.chartManagerInstance != null) {
myObj.chartManagerInstance.resizeTo({width:
parseInt(chartContainerReference.style.width), height:
parseInt(chartContainerReference.style.height)});
}
}
On 29 Mar, 15:30, "George Roberts" <gr-googlegrp...@spamarrest.com>
wrote:
> display:none or visibility:hidden is set you will get this exact same error.
>
> So in your code that double checks the size, please also check display and
> visibility css styles.
>
> I know this because many people try to draw the graph and then fade it in
> with jquery. This doesn't work. The workaround is to make it visible but
> position it left:-1000 so it is off the screen to the left. Draw the graph,
> then make it invisible, position it properly, then fade it in.
>
George Roberts
credit. I suspect you are exactly correct in that this is some strange
jquery bug. It sucks that it is intermittent and it seems like it will be
very difficult to debug. Noone else seems to have seen anything like this
and I've been on this list for over a year.
On another note, although firefox is showing 50k points just fine, ie6 will
die with that much as <canvas> is emulated slowly in ie6. Also if you zoom
in (even with firefox) you will probably experience slow load times. If
your screen width is 50,000 pixels wide then there isn't much you can do but
if your graph is only say 1000 pixels wide then in the x direction you have
50 points per pixel. This is more data than necessary. Instead you could
do what most people do: find the min and max for 50 points on the server,
then send only the min and max values out to flot, repeat for the next 50
points and so on. This will convert 50k points to 2k points. You will get
less network traffic (slightly faster load times) and more importantly, the
graphs will come up even faster and look the same.
- George Roberts
http://gr5.org
-----Original Message-----
From: Ruben Oliveira
Sent: Tuesday, March 29, 2011 11:15 AM
To: Flot graphs
Subject: Re: uncaught exception: Invalid dimensions for plot, width = 0,
height = 0
Hi George,
> The <canvas> *must* also be visible. So even if it has a size if
> display:none or visibility:hidden is set you will get this exact same
> error.
>
> So in your code that double checks the size, please also check display and
> visibility css styles.
>
> I know this because many people try to draw the graph and then fade it in
> with jquery. This doesn't work. The workaround is to make it visible but
> position it left:-1000 so it is off the screen to the left. Draw the
> graph,
> then make it invisible, position it properly, then fade it in.
>
> - George Robertshttp://gr5.org
Ole Laursen
> A couple of days ago, I searched for the problem on the flot code and
> I
> ended up suspecting that the problem might be related to some sort of
> cache related with jquery. I'm not very experienced in jquery, the
> project I'm working on uses YUI, so I'm not quite sure about this.
>
> Does anyone have a clue about the cause of this behavour?
Not me, but apart from the good suggestions by George, I would suggest
you try calling $("#placeholder").width() and console.log it so Flot
itself doesn't enter the picture. Maybe take a small example to the
jQuery community.
About the dimensions: Once upon a time a guy here did some research on
the layout stuff so that he could hardcode the width/height with CSS,
turn the placeholder into display: none and still get a chart by
falling back to CSS values for width/height instead of real
width/height. That wouldn't work in general because Flot needs to
measure the labels too (he got around that by specifying their
dimensions manually), but now that I'm on the verge of merging in
canvas text support, I hope to see some movement here.
Ole
Ruben Oliveira
50K is in fact too much but this is temporary. I just wanted to let
you konw it performes quite well, considering the amount of data. Yes
in IE, I get a stack oveflow error.... fairly predictable ;) but i'm a
lucky guy that is developing only for FF :)
We tried a step down on the chart series (to 20K and still is too much
since the available width is no more than 1000px) and the performance
starts to be very good.
Yes i'd rather have a permanent bug than a an intermittent one...
Anyway, I'm developing more features related on the chart and I intend
to get back to this issue again and give it more atention.
Thanks a lot for you time!
On 29 Mar, 16:36, "George Roberts" <gr-googlegrp...@spamarrest.com>
wrote:
> credit. I suspect you are exactly correct in that this is some strange
> jquery bug. It sucks that it is intermittent and it seems like it will be
> very difficult to debug. Noone else seems to have seen anything like this
> and I've been on this list for over a year.
>
> On another note, although firefox is showing 50k points just fine, ie6 will
> die with that much as <canvas> is emulated slowly in ie6. Also if you zoom
> in (even with firefox) you will probably experience slow load times. If
> your screen width is 50,000 pixels wide then there isn't much you can do but
> if your graph is only say 1000 pixels wide then in the x direction you have
> 50 points per pixel. This is more data than necessary. Instead you could
> do what most people do: find the min and max for 50 points on the server,
> then send only the min and max values out to flot, repeat for the next 50
> points and so on. This will convert 50k points to 2k points. You will get
> less network traffic (slightly faster load times) and more importantly, the
> graphs will come up even faster and look the same.
>
Ruben Oliveira
Thanks.
I did logged the placeholder width, and it existed defined as px. This
is why I was suprised with this bug...
What I wasn't able to do (I don't know why) was to catch the error and
call plto again. But I will come back to this issue again.
On 4 Abr, 12:24, Ole Laursen <o...@iola.dk> wrote:
> 2011/3/29 Ruben Oliveira <mail.rolive...@gmail.com>:
Ruben Oliveira
return name ? jQuery.cache[ id ][ name ] : id;
This is why I associated the problem with jquery, but it may be that
the problem is elsewhere and jquery is catching it.
This error happens when I try to instantiate a new plot, while another
plot is beeing instantiated.
> credit. I suspect you are exactly correct in that this is some strange
> jquery bug. It sucks that it is intermittent and it seems like it will be
> very difficult to debug. Noone else seems to have seen anything like this
> and I've been on this list for over a year.
>
> On another note, although firefox is showing 50k points just fine, ie6 will
> die with that much as <canvas> is emulated slowly in ie6. Also if you zoom
> in (even with firefox) you will probably experience slow load times. If
> your screen width is 50,000 pixels wide then there isn't much you can do but
> if your graph is only say 1000 pixels wide then in the x direction you have
> 50 points per pixel. This is more data than necessary. Instead you could
> do what most people do: find the min and max for 50 points on the server,
> then send only the min and max values out to flot, repeat for the next 50
> points and so on. This will convert 50k points to 2k points. You will get
> less network traffic (slightly faster load times) and more importantly, the
> graphs will come up even faster and look the same.
>
George Roberts
can examine variables and possibly more importantly, you can look at the
stack to see what function called the current function all the way up the
stack. You can probably look at variables in each of these contexts but I
don't remember. In other words, go up the stack until you hit a function
you wrote or understand, click on that and then examine the variable values
there.
The "break on errors" button is found when you are in console mode the left
most icon that looks like a pause button with a red circle/slash over it.
When it is active it kind of glows. Don't forget to turn it off as it kind
of locks up all web pages where firebug is active.
- George Roberts
http://gr5.org
-----Original Message-----
From: Ruben Oliveira
Sent: Tuesday, April 05, 2011 4:31 AM
To: Flot graphs
Subject: Re: uncaught exception: Invalid dimensions for plot, width = 0,
height = 0
Firebug says that it is on jquery.js, line 1296:
return name ? jQuery.cache[ id ][ name ] : id;
This is why I associated the problem with jquery, but it may be that
the problem is elsewhere and jquery is catching it.
This error happens when I try to instantiate a new plot, while another
plot is beeing instantiated.
On 29 Mar, 16:36, "George Roberts" <gr-googlegrp...@spamarrest.com>
wrote:
> Oh. Your method looks fine. I suspect you are smarter than I gave you
> credit. I suspect you are exactly correct in that this is some strange
> jquery bug. It sucks that it is intermittent and it seems like it will be
> very difficult to debug. Noone else seems to have seen anything like this
> and I've been on this list for over a year.
>
> On another note, although firefox is showing 50k points just fine, ie6
> will
> die with that much as <canvas> is emulated slowly in ie6. Also if you
> zoom
> in (even with firefox) you will probably experience slow load times. If
> your screen width is 50,000 pixels wide then there isn't much you can do
> but
> if your graph is only say 1000 pixels wide then in the x direction you
> have
> 50 points per pixel. This is more data than necessary. Instead you could
> do what most people do: find the min and max for 50 points on the server,
> then send only the min and max values out to flot, repeat for the next 50
> points and so on. This will convert 50k points to 2k points. You will
> get
> less network traffic (slightly faster load times) and more importantly,
> the
> graphs will come up even faster and look the same.
>
Ruben Oliveira
Just to to let everyone know that the problem is fixed.
As I said the problem wasn't constant and that really was a pain. But the fact is that it was related with the app layout and not rellated with flot or jquery. Sometimes, plot was being called on a container that wasn't on the DOM anymore due to a bug when dealing with references for the container in javascript.
Mea culpa.
Thanks everyone!