search

markrcote / flot-tickrotor

Flot plugin to display angled X-axis tick labels. This repo is unmaintained in part due to flot being in a similar situation.
23 stars 39 forks source link

Rotating not working well for me #3

Open dfrankow opened 12 years ago

dfrankow commented 12 years ago

Thanks for your work on this plugin. I'm afraid it isn't going well for me.

On chrome 20.0.1132.43 beta, the fonts spill outside the visible region. Screenshot: http://goo.gl/1PRdf. This might be due to the fact that I make my fonts bigger, although I tried to change them back to regular size.

On Safari 5.1.7, all the characters seem to pile on top of each other. Screenshot: http://goo.gl/ngYYl. This is default Safari, without any changes to font sizes or other settings.

Complete tarball of my example: http://goo.gl/jedlx

These are for rotateTicks: 135. I've tried other settings, and they have similar problems.

ghost commented 11 years ago

Thanks for this greate plugin. I have the same issues as reported with Safari and I'm rotating it at the same angle. All other browsers works weel for me.

gevansmd commented 10 years ago

I'm having the same trouble in Chrome 36.0.1985.125 m, Firefox 29.0.1 and IE 11.0.9600.17207. My labels are cut off at the bottom of all labels and on the rightmost label half is cut off. For example 2033 appears as 20. Varying the angle between 15 to 115 degrees produced variations of the same problem. 115 degrees was completely unreadable with others cut off to at least some degree. Here is an example using 45 degrees on IE. It looks the best here with only the rightmost label cut off. image

gevansmd commented 10 years ago

Here's the same graph on Firefox:

image

And Chrome:

image

jnel899 commented 9 years ago

I found a super easy fix to the bottom of the labels being cut off. This was the only issue bothering me and I thought others may find it useful.
Change line 142 of the tickrotor file from: yoffset = Math.ceil(Math.sin(radsAboveHoriz) * tick.height); to: yoffset = Math.ceil(Math.sin(radsAboveHoriz) * tick.height) / 3.14;

before: before

after: 2015-01-02_1358

Notice how the labels are slightly more appropiately positioned and the bottoms are no longer cut off.

Here is an more extreme test case: before: before2

after: before1

I am trying to figure out how to solve the cut off on the right side, if I can find a good solution, I'll post back here

PlippiePlop commented 9 years ago

An easy fix for spacing on the sides s to add one ro more 'empty' X ticks using the MAX option. So giving more space to the right. Example var totalXticks (count the x ticks) xaxis:{max:(totalXticks + 2 ) }