Page zooming (Ctrl +/-) in IE7 causes points to scale out of sync with lines

[GoogleCodeExporter]

When the user resizes the webpage using Ctrl-mousewheel or Ctrl- and Ctrl+ the 
ticks (points) scale out of sync with the rest of the graph. That is, the point 
are resized 'more' than the graph: when the page is made smaller the points 
appear to fit an even smaller graph and when the page is enlarged the points 
would fit a bigger graph.

Screenshots here:
http://pics.livejournal.com/alternatief/gallery/00007r23

The problem remains when the flot is redrawn as long as the page is 
enlarged/made smaller from the default.

I have posted this issue on the Github fork recently, but as the original is 
still quite active, i figured i should add the issue here as well. Flot is 
great btw :-)

Original issue reported on code.google.com by i.c...@nki.nl on 1 Feb 2011 at 1:41

[GoogleCodeExporter]

The reason is that you didn't specify a fixed width on the placeholder div. You 
need to do that.

Now, you could argue that if the width has to be fixed, then Flot should fix it 
when you do the plot.

I think there are two reasons why I think it's best to leave it as it is for 
now. First, I've recently added a plugin that checks for resize changes and 
replots in case it finds any. This wouldn't work if Flot fixes the width - of 
course, I could do some hackery there, but I'd prefer to avoid that. Second, 
I'm going to land a patch for canvas text labels soonish, and once it's in, I 
don't think you will have this problem anymore.

Original comment by olau%iol...@gtempaccount.com on 2 Feb 2011 at 11:37

[GoogleCodeExporter]

Hi Ole, 

Thanks for answering.
My placeholder looks like:
<DIV id=placeholder style="WIDTH: 600px; HEIGHT: 300px"></DIV>

It is specific to IE (7 anyway, still have to test 8), Firefox scales just fine.

Original comment by i.c...@nki.nl on 2 Feb 2011 at 3:48

[GoogleCodeExporter]

Ah, sorry, I didn't read your description properly. I just read "resize page" 
as in resize the window by dragging the corner and went with that.

The reason why this happens is that the VML scales differently to the real 
HTML. The graph is made with VML (by excanvas), the ticks are made with HTML. 
Now the canvas text patch I mention might fix this, since it should mean that 
the ticks are going to be made with VML too.

Meanwhile, you could grab the resize plugin here

http://flot.googlecode.com/svn/trunk/jquery.flot.resize.js

and see if it helps. It may have to be modified to take font resizing into 
account. That's basically the only solution I can think of - if the font size 
changes, you have to redraw the graphics to fit.

Original comment by olau%iol...@gtempaccount.com on 3 Feb 2011 at 12:32

• Changed title: Page zooming (Ctrl +/-) in IE7 causes points to scale out of sync with lines

[GoogleCodeExporter]

I should add that resizing the font by using the menu options: View > Text Size 
> [Largest .. Smallest] does *not* cause this problem. 
I only now realise i have not been using the right words: it's 'zoomlevel'. 
When user changes the zoomlevel in IE7 things go wrong.

Thanks for the tips. If/when this particular inconvenience gets to the top of 
the issue list for my webapp, i'll see about detecting zoomlevel changes and 
replotting. And posting my solution, of course :-)

Original comment by i.c...@nki.nl on 3 Feb 2011 at 2:21

[GoogleCodeExporter]

Issue 259 has been merged into this issue.

Original comment by olau%iol...@gtempaccount.com on 10 Mar 2011 at 7:41

[GoogleCodeExporter]

Original comment by dnsch...@gmail.com on 8 May 2012 at 12:43

• Changed state: Accepted