Long x-axis labels #164

Open
dnschnur opened this Issue Sep 28, 2012 · 28 comments

Comments

Projects
None yet
2 participants
@dnschnur
Member

dnschnur commented Sep 28, 2012

Original author: manf...@gmail.com (December 17, 2008 02:09:02)

If my labels on x-axis is too long so the label is displayed cross others,
how can I solve the problem?

For Example:

Label1
Label2

consider them as at the same layer

Original issue: http://code.google.com/p/flot/issues/detail?id=85

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From themrpot...@gmail.com on December 18, 2008 19:35:52
Do you have room on your page to make the chart wider?
I had this same issue and hope that label rotation is implemented soon.

(I attached a sample chart displaying the problem)

Member

dnschnur commented Sep 28, 2012

From themrpot...@gmail.com on December 18, 2008 19:35:52
Do you have room on your page to make the chart wider?
I had this same issue and hope that label rotation is implemented soon.

(I attached a sample chart displaying the problem)

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From themrpot...@gmail.com on December 18, 2008 20:38:10
Or add a '
' between each character of the label, it's not really pretty, but it
works.

Member

dnschnur commented Sep 28, 2012

From themrpot...@gmail.com on December 18, 2008 20:38:10
Or add a '
' between each character of the label, it's not really pretty, but it
works.

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From manf...@gmail.com on December 24, 2008 03:01:54
thanks themrpotatohead, i just add
between them

Merry Christmas=]

Member

dnschnur commented Sep 28, 2012

From manf...@gmail.com on December 24, 2008 03:01:54
thanks themrpotatohead, i just add
between them

Merry Christmas=]

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From olau%iol...@gtempaccount.com on January 05, 2009 16:51:27
There's no good solution for this at the moment.

Member

dnschnur commented Sep 28, 2012

From olau%iol...@gtempaccount.com on January 05, 2009 16:51:27
There's no good solution for this at the moment.

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From achama...@gmail.com on January 07, 2009 02:20:21
One out of two labels could be positioned lower :

Label1 Label3 Label5
Label2 Label4

Of course being able to rotate the labels would be even better, but this is not
easily possible right now.

Member

dnschnur commented Sep 28, 2012

From achama...@gmail.com on January 07, 2009 02:20:21
One out of two labels could be positioned lower :

Label1 Label3 Label5
Label2 Label4

Of course being able to rotate the labels would be even better, but this is not
easily possible right now.

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From olau%iol...@gtempaccount.com on January 12, 2009 13:15:31
Yes. Flot is already doing some measurements of the labels, it's probably possible to
use those to estimate whether we need to move the labels, then simply do it. We most
likely need an option to set the number of levels so you can override it if it
guesses wrong.

Patches accepted. :)

Member

dnschnur commented Sep 28, 2012

From olau%iol...@gtempaccount.com on January 12, 2009 13:15:31
Yes. Flot is already doing some measurements of the labels, it's probably possible to
use those to estimate whether we need to move the labels, then simply do it. We most
likely need an option to set the number of levels so you can override it if it
guesses wrong.

Patches accepted. :)

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From d...@mailinator.com on January 22, 2010 23:37:10
investigating jqplot for how they rotate the labels, will see it's it applicable here.

commenting so there's a chance someone do that before I get to do it :)

Member

dnschnur commented Sep 28, 2012

From d...@mailinator.com on January 22, 2010 23:37:10
investigating jqplot for how they rotate the labels, will see it's it applicable here.

commenting so there's a chance someone do that before I get to do it :)

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From d...@mailinator.com on January 22, 2010 23:38:14
Also, the
idea is not applicable if you are using a date.

Member

dnschnur commented Sep 28, 2012

From d...@mailinator.com on January 22, 2010 23:38:14
Also, the
idea is not applicable if you are using a date.

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From ryl...@gmail.com on March 16, 2010 19:02:16
About jqplot - uses a canvas element per label... and goes to a ton of effort to draw
text in a cross-platform way (see here for exactly how they handle it for platforms
without the ability to call canvas.fillText:
http://bitbucket.org/cleonello/jqplot/src/e5b00018bb61/src/plugins/jqplot.canvasTextR
enderer.js). For now I'd say you'd be best off generating vertical/45-degree images
for each label. Integrating the labels into the canvas might be something flot wants
to do, but it certainly restricts a lot of the fun we can have with labels (i.e. no
more CSS or HTML).

The other thing I thought of was using -[moz|o|webkit]-transform: rotate(Xdeg) as a
CSS3 style for the tickLabels, and it worked beautifully.... unfortunately it's only
supported by FF3.5+, Opera 10.5, WebKit 525... and you can support IE using their
Matrix filter, which I have confirmed could work but didn't test any further. The
only change you actually had to make to flot was to get measureLabels to calculate
the height of each label better... I combined that with the code from Issue #191 and
it was perfect (see attached image).

Member

dnschnur commented Sep 28, 2012

From ryl...@gmail.com on March 16, 2010 19:02:16
About jqplot - uses a canvas element per label... and goes to a ton of effort to draw
text in a cross-platform way (see here for exactly how they handle it for platforms
without the ability to call canvas.fillText:
http://bitbucket.org/cleonello/jqplot/src/e5b00018bb61/src/plugins/jqplot.canvasTextR
enderer.js). For now I'd say you'd be best off generating vertical/45-degree images
for each label. Integrating the labels into the canvas might be something flot wants
to do, but it certainly restricts a lot of the fun we can have with labels (i.e. no
more CSS or HTML).

The other thing I thought of was using -[moz|o|webkit]-transform: rotate(Xdeg) as a
CSS3 style for the tickLabels, and it worked beautifully.... unfortunately it's only
supported by FF3.5+, Opera 10.5, WebKit 525... and you can support IE using their
Matrix filter, which I have confirmed could work but didn't test any further. The
only change you actually had to make to flot was to get measureLabels to calculate
the height of each label better... I combined that with the code from Issue #191 and
it was perfect (see attached image).

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From richho...@gmail.com on April 02, 2010 12:59:18
Would happen to have a code snippet by any chance?

Member

dnschnur commented Sep 28, 2012

From richho...@gmail.com on April 02, 2010 12:59:18
Would happen to have a code snippet by any chance?

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From eduardo....@gmail.com on July 27, 2010 00:53:05
I tried rotating text with css3, the problem is that IE can only rotate in 4 positions. 0, 90, 180 and 270 degrees. But it's the best solution I've found

Member

dnschnur commented Sep 28, 2012

From eduardo....@gmail.com on July 27, 2010 00:53:05
I tried rotating text with css3, the problem is that IE can only rotate in 4 positions. 0, 90, 180 and 270 degrees. But it's the best solution I've found

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From cycleme...@gmail.com on September 25, 2010 16:01:56
I tried using something like this:
{
xasix: {
ticks: [
[1, label], ....
]}}

But, the labels are shifted along the x axis (at seemingly random intervals).
How do you get the label to show up on the particular bar that it goes with?
(I realize this won't work in all browsers yet, I'm testing in firefox for now just trying to get SOMETHING to work).

Member

dnschnur commented Sep 28, 2012

From cycleme...@gmail.com on September 25, 2010 16:01:56
I tried using something like this:
{
xasix: {
ticks: [
[1, label], ....
]}}

But, the labels are shifted along the x axis (at seemingly random intervals).
How do you get the label to show up on the particular bar that it goes with?
(I realize this won't work in all browsers yet, I'm testing in firefox for now just trying to get SOMETHING to work).

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From prabhu.m...@gmail.com on September 29, 2010 11:12:18
Hi i found the solution,

If the labels on X-Axis are too long such as 0.005 or 0.006 then it will overlap one another, to solve this we can change the position of X-Axis ticks from Horizontal Position to Vertical Position to achieve this just add the following CSS script on the HTML page
.vertical
{
-o-transform:rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform:rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

and change the CSS class name on add labels in jquery.flot.js file, roughly line number 1257 e.g 'class="tickLabel vertical"'
addLabels(axes.xaxis, function (tick, axis) {
return '

' + tick.label + "
";
});

Member

dnschnur commented Sep 28, 2012

From prabhu.m...@gmail.com on September 29, 2010 11:12:18
Hi i found the solution,

If the labels on X-Axis are too long such as 0.005 or 0.006 then it will overlap one another, to solve this we can change the position of X-Axis ticks from Horizontal Position to Vertical Position to achieve this just add the following CSS script on the HTML page
.vertical
{
-o-transform:rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform:rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

and change the CSS class name on add labels in jquery.flot.js file, roughly line number 1257 e.g 'class="tickLabel vertical"'
addLabels(axes.xaxis, function (tick, axis) {
return '

' + tick.label + "
";
});

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From ryl...@gmail.com on December 24, 2010 18:30:57
I've written up a patch that adds support for label angles from -90 to 90

Supports browsers: IE6+, FF3.5+, Chrome 1.0, and Opera 10.5. Works on any axis.

IE9 probably still does not work, but I suspect that since it
supposedly supports CSS3 transform, it would just be a matter of
lumping it in with the non-IE browsers.

Attached is the patch, which applies well enough to svn right now (random whitespace fails but not an issue). Also in the patch is a little test html that you can run to test it out.

Ole, I am very curious to have you look it over. I suspect there are a few things you won't like, #1 being the use of jQuery.browser. I wasn't able to find a good way to use jQuery.support. #2: I'm sure the math I'm doing could be cleaner. At least the badness is mostly self-contained? #3: I think we have to have the accurate calculation of the label width/height for x-axes in measureTickLabels... I know there's another patch kicking around that does something similar and your worry was about speed. FWIW, I haven't noticed any issues when using this.

Member

dnschnur commented Sep 28, 2012

From ryl...@gmail.com on December 24, 2010 18:30:57
I've written up a patch that adds support for label angles from -90 to 90

Supports browsers: IE6+, FF3.5+, Chrome 1.0, and Opera 10.5. Works on any axis.

IE9 probably still does not work, but I suspect that since it
supposedly supports CSS3 transform, it would just be a matter of
lumping it in with the non-IE browsers.

Attached is the patch, which applies well enough to svn right now (random whitespace fails but not an issue). Also in the patch is a little test html that you can run to test it out.

Ole, I am very curious to have you look it over. I suspect there are a few things you won't like, #1 being the use of jQuery.browser. I wasn't able to find a good way to use jQuery.support. #2: I'm sure the math I'm doing could be cleaner. At least the badness is mostly self-contained? #3: I think we have to have the accurate calculation of the label width/height for x-axes in measureTickLabels... I know there's another patch kicking around that does something similar and your worry was about speed. FWIW, I haven't noticed any issues when using this.

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From ryl...@gmail.com on February 16, 2011 18:27:33
You can play with this in any browser here: http://playground.flotjs.org (click on x or y axis and check labelAngle, then change the value)

Since the patch I posted above, I've removed issue #1, it now uses property testing to figure out whether the user has IE or not. I can post that patch if it is of interest.

Member

dnschnur commented Sep 28, 2012

From ryl...@gmail.com on February 16, 2011 18:27:33
You can play with this in any browser here: http://playground.flotjs.org (click on x or y axis and check labelAngle, then change the value)

Since the patch I posted above, I've removed issue #1, it now uses property testing to figure out whether the user has IE or not. I can post that patch if it is of interest.

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From Luc.Pett...@gmail.com on February 17, 2011 12:46:25
Wow this is awesome. It's not often i stumble across a forum and the solution to my problem was only posted 1 day ago! Thanks!

Member

dnschnur commented Sep 28, 2012

From Luc.Pett...@gmail.com on February 17, 2011 12:46:25
Wow this is awesome. It's not often i stumble across a forum and the solution to my problem was only posted 1 day ago! Thanks!

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From dejon...@gmail.com on March 15, 2011 17:35:52
Now I am pretty sure it is safe to assume this is going to be a horse of a difference colour... but what are the chances there is a way to get these angled tick labels to be printable (i.e. having them be part of the canvas... but again... horse of a different colour)

Member

dnschnur commented Sep 28, 2012

From dejon...@gmail.com on March 15, 2011 17:35:52
Now I am pretty sure it is safe to assume this is going to be a horse of a difference colour... but what are the chances there is a way to get these angled tick labels to be printable (i.e. having them be part of the canvas... but again... horse of a different colour)

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From ryl...@gmail.com on March 22, 2011 18:09:50
#19, Ole has mentioned that canvas-based text is "coming soon", and I will happily be making this work in that case once it is available.

Member

dnschnur commented Sep 28, 2012

From ryl...@gmail.com on March 22, 2011 18:09:50
#19, Ole has mentioned that canvas-based text is "coming soon", and I will happily be making this work in that case once it is available.

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From gfa.sty...@mls.nc on May 08, 2011 09:18:46
I am interesed in the patch proposed in comment#17. Can you please post it here? Thanks in advance

Member

dnschnur commented Sep 28, 2012

From gfa.sty...@mls.nc on May 08, 2011 09:18:46
I am interesed in the patch proposed in comment#17. Can you please post it here? Thanks in advance

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From William....@gmail.com on May 16, 2011 20:42:48
And, of course, as soon as I post this to annoy everybody, I figure it out. I was making it WAY too hard. All I had to do was change the transform and angle after calculating the normal x,y.

I should have a patch ready soon that does this, I think. It works for me at the moment, anyway. Just have to tie it to the option input and clean up a bit, and then I'll post it.

Member

dnschnur commented Sep 28, 2012

From William....@gmail.com on May 16, 2011 20:42:48
And, of course, as soon as I post this to annoy everybody, I figure it out. I was making it WAY too hard. All I had to do was change the transform and angle after calculating the normal x,y.

I should have a patch ready soon that does this, I think. It works for me at the moment, anyway. Just have to tie it to the option input and clean up a bit, and then I'll post it.

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From PaRaDoXX...@gmail.com on August 29, 2011 14:30:50
Hi! I've implemented this functionality, see #15

Member

dnschnur commented Sep 28, 2012

From PaRaDoXX...@gmail.com on August 29, 2011 14:30:50
Hi! I've implemented this functionality, see #15

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From vip...@gmail.com on January 06, 2012 10:02:21
doesnt any one have a live example of this chart with a rotated label.... ???

Member

dnschnur commented Sep 28, 2012

From vip...@gmail.com on January 06, 2012 10:02:21
doesnt any one have a live example of this chart with a rotated label.... ???

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From oswaldo....@digital01.com on February 24, 2012 17:08:46
please examples of this functionality

Member

dnschnur commented Sep 28, 2012

From oswaldo....@digital01.com on February 24, 2012 17:08:46
please examples of this functionality

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From manishsp...@gmail.com on March 03, 2012 21:38:05
I have created an example with rotated label on X-Axis. It is working fine for angles 45 and 90 for me, You can always try other angles.

Link @ jsfiddle - http://jsfiddle.net/manishsp2008/vNSD8/

PS : js used @ https://raw.github.com/paradoxxxzero/flot/28f2377382b3af97c82cb3ebc081140b49fa9579/jquery.flot.js

Member

dnschnur commented Sep 28, 2012

From manishsp...@gmail.com on March 03, 2012 21:38:05
I have created an example with rotated label on X-Axis. It is working fine for angles 45 and 90 for me, You can always try other angles.

Link @ jsfiddle - http://jsfiddle.net/manishsp2008/vNSD8/

PS : js used @ https://raw.github.com/paradoxxxzero/flot/28f2377382b3af97c82cb3ebc081140b49fa9579/jquery.flot.js

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From NMHammo...@gmail.com on April 03, 2012 17:24:35
.xAxis > .tickLabel
{
margin-top:30px;
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

This is what worked for me to rotate just the labels in the xaxis. It targets the xAxis class as defined in jquery.flot.js. Excerpt is included below:

function makeDummyDiv(labels, width) {
return $('

' + '
'+ labels.join("") + '
').appendTo(placeholder);

}

Member

dnschnur commented Sep 28, 2012

From NMHammo...@gmail.com on April 03, 2012 17:24:35
.xAxis > .tickLabel
{
margin-top:30px;
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

This is what worked for me to rotate just the labels in the xaxis. It targets the xAxis class as defined in jquery.flot.js. Excerpt is included below:

function makeDummyDiv(labels, width) {
return $('

' + '
'+ labels.join("") + '
').appendTo(placeholder);

}

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From rahul.pa...@tandoninfo.com on April 12, 2012 04:17:13
Hii I m using FLOT control in my project.
I wanted to change the size of Xaxis time i.e in my Xaxis there's time 01.00,02.00,03.00,04.00 and so on,when the time comes to 00.00 instead of 00.00 i have shown there date. Now the date is overlapping then i have also changed the date size to xx-small.
Is there any way that i can decrease the size of xaxis labes[i.e Time] and display the date large, so that the date is visible large and times r visible small.?
Thank You!

Member

dnschnur commented Sep 28, 2012

From rahul.pa...@tandoninfo.com on April 12, 2012 04:17:13
Hii I m using FLOT control in my project.
I wanted to change the size of Xaxis time i.e in my Xaxis there's time 01.00,02.00,03.00,04.00 and so on,when the time comes to 00.00 instead of 00.00 i have shown there date. Now the date is overlapping then i have also changed the date size to xx-small.
Is there any way that i can decrease the size of xaxis labes[i.e Time] and display the date large, so that the date is visible large and times r visible small.?
Thank You!

@dnschnur

This comment has been minimized.

Show comment Hide comment
@dnschnur

dnschnur Sep 28, 2012

Member

From dieter.o...@gmail.com on May 06, 2012 21:21:07
The is also a plugin available:
https://github.com/markrcote/flot-tickrotor

Member

dnschnur commented Sep 28, 2012

From dieter.o...@gmail.com on May 06, 2012 21:21:07
The is also a plugin available:
https://github.com/markrcote/flot-tickrotor

@oghenez

This comment has been minimized.

Show comment Hide comment
@oghenez

oghenez Sep 4, 2013

i get garbled text when i redraw a bar chat with flot , how do i correct this?
flot_overlapping

oghenez commented Sep 4, 2013

i get garbled text when i redraw a bar chat with flot , how do i correct this?
flot_overlapping

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment