5

I'm attempting to rotate the dates on the bottom of my graph to appear vertical versus horizontal. I'm using flot-tickrotor but it doesn't seem to work correctly. 

 xaxis: {
   rotateTicks: 110,
   mode: "time",
   timeformat: "%m/%d",
   minTickSize: [7, "day"],
   ticks: cpudatearray
 }

The end result is not correct, it all appears jumbled. enter image description here

Joey
  • 344,408
  • 85
  • 689
  • 683
Blake
  • 1,067
  • 14
  • 25

2 Answers2

9

You might have better luck just handling this with CSS instead of using the plug in:

#flotPlaceholder div.xAxis div.tickLabel 
{    
    transform: rotate(-90deg);
    -ms-transform:rotate(-90deg); /* IE 9 */
    -moz-transform:rotate(-90deg); /* Firefox */
    -webkit-transform:rotate(-90deg); /* Safari and Chrome */
    -o-transform:rotate(-90deg); /* Opera */
    /*rotation-point:50% 50%;*/ /* CSS3 */
    /*rotation:270deg;*/ /* CSS3 */
}

Obviously change the angle to whatever it is you're trying to achieve. If you want to use this for the y-axis, just change the div.xAxis selector.

Result after testing in my own flot graph: enter image description here

Brendan Moore
  • 1,131
  • 7
  • 13
  • Thanks for the responses - The charts have to be displayed in IE8 so I don't think this will work. – Blake Oct 18 '12 at 22:38
  • 3
    For older IE versions, you could try using `filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);` (or possibly `-ms-filter:`). See this [answer](http://stackoverflow.com/questions/9051030/rotating-text-with-css-and-ie) and this [MS reference](http://msdn.microsoft.com/en-us/library/ms532918.aspx) – Brendan Moore Oct 22 '12 at 06:41
  • Another option would be to load [jqueryrotate](http://code.google.com/p/jqueryrotate/) and after flot is done plotting, you could call `$("#flotPlaceholder div.xAxis div.tickLabel").rotate(270)`. Note that I have not used this package, and his documentation states that only the newer version 3 supports rotating all element types. Older versions apparently only work with images. Just another option I ran across that seemed interesting. – Brendan Moore Oct 22 '12 at 06:46
  • That CSS selector does not change anything in my X-Axis. I have asked a similar question as the OP here: http://stackoverflow.com/questions/16044560/flot-graph-tick-label, but I can't find a solution. – Justin Apr 16 '13 at 21:06
1

@Brendan's answer looks like it might work fairly well, however before you implement that, I would consider whether this is something that you really want to do from a usability perspective.

If the maximum length of text that you're displaying is 5 characters (from your question, a 'MM DD' string), your charts would likely be easier to read if you only labelled every third 'tick' (or however many makes sense for your data).

I went through a similar exercise with my charts on a dashboard-style application. Users were adamant that they needed an X label for every result, but since the chart had 96 ticks this created quite a lot of text once I rotated them 90 degrees like you're attempting to. When I showed them a mockup with a horizontal X label for every 6th point, they preferred that option and that's what we went with for the delivered solution. (Your Mileage May Vary..)

Peter Bernier
  • 8,038
  • 6
  • 38
  • 53
  • I actually agree with you on a preference for spacing out the labels, as you can see is the case for my plot with labels every 3 months (this is in production, though without the rotation). However, that design choice is up to @blake-adams. Perhaps he has other reasons for wanting the rotation. Or perhaps the users just need to see the rotated version next to the spaced out version to decide they also like it better ;) – Brendan Moore Oct 11 '12 at 19:40
  • Agreed. My intention wasn't to imply that your solution was incorrect (it does answer the question after all). I just wanted to highlight a design consideration that @blake-adams may not have thought of (since I had a very similar chart to display). – Peter Bernier Oct 11 '12 at 20:23