Rotate Whole Graph #840

geekdenz opened this Issue Oct 5, 2012 · 4 comments


None yet

2 participants

geekdenz commented Oct 5, 2012

I need to rotate the whole graph by 90 degrees because we're visualising a soil profile. Now, I can achieve it with CSS3 simply by giving the containing element a transform. However, this does not work in IE8 and below. Unfortunately, we need to support IE8, but I haven't found a good way of achieving this yet. One way would be to draw everything in the canvas ctx rotated by 90 degrees. This should be simple by just calling
as the first call to the canvas context. However, I don't want to just hack the core, but maybe that's what I need to do.

It would be great to have an option like
options = {
rotate: Math.PI/2
and maybe a plugin.

dnschnur commented Oct 5, 2012

You can rotate elements in IE8 using matrix transform filters, although I've never tried applying one to a whole chart. I don't understand, though, why one would want to rotate the plot, as opposed to just swapping the x and y axes and drawing the series horizontally instead of vertically.

geekdenz commented Oct 6, 2012

I tried Microsoft's filters but it doesn't seem to work for VML elements. It looks all funny and scrambled. How do I even target a VML root element with CSS? I couldn't find documentation on that on the M$ website.

I hacked flot and put the ctx.rotate() code in, but that is far from ideal but works for the demo.

The reason we want to rotate the graph is, that it is a bar chart that needs to have the bars extend from left to right. Is there maybe another way to achieve that? If yes, I would appreciate a hint.

Thanks for the quick answer!

geekdenz commented Oct 6, 2012

Just found this:
So, I guess it is possible. Why didn't I think of that first... Thanks anyway.

dnschnur commented Oct 6, 2012

No problem; have fun with Flot!

@dnschnur dnschnur closed this Oct 6, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment