Flot - Get Your Ticks Rotated With Flot-Tickrotor

Once again this blog post is some simple but useful feature that I came across while playing out with Flot.

Problem
Have you ever got into trouble by your x-axis ticks overlapping on each other as you have many to be occupied within a small place-holder or because ticks are too long? It will make your chart look like a mess. 

Solution

As a workaround you can increase the width of your place-holder. But you will face into trouble if your place-holder has already occupied the full length of your page or your place-holder size is fixed and you don't have control over it.

Best possible solution

Probably you might have thought of rotating them in some angle to get this solved so that the visibility of the ticks get improved. Yes, that is the best possible solution that one can think of. Rotate the x-axis ticks !!!

So in this blog post I will explain how you can rotate your ticks or in other words display your ticks in some preferred angle.

It is just simple three step process.

1. Clone Flot-Tickrotor from here and place the jquery.flot.tickrotor.js along with other flot plugins.

2. Import the script file in your chart file as follows. 

   
     <script language="javascript" src="lib/jquery.flot.tickrotor.js" type="text/javascript"></script>

          

IMPORTANT :
If you are using jquery.flot.axislabels.js then make sure that you place your jquery.flot.tickrotor.js before the jquery.flot.axislabels.js. Because jquery.flot.tickrotor.js completely redefines X-axis label height and then jquery.flot.axislabels.js modifies it.

3. In the options section of the xaxis specify the angle that you need to get your ticks rotated as rotateTicks.

                xaxis: {
                        axisLabel: 'Application',
                          ticks: ticks,
                        -------------------------
                        < your other x-axis options goes here >
                        -------------------------
                        rotateTicks: 135
               }

We are ready to go !!! Now our x-axis ticks have rotated with an angle of 135 degrees.

IMPORTANT :
You need to use the jquery.flot.js file from the flot-branch master as there is some bug fixed done in the master, related to ticks rotation.

If not, you will end up with your ticks getting repeated as shown in the below image.

You can find the full sample code of the above graph here .

Acknowledgement
- Thanks Mark Cote for the flot plugin to get the ticks rotated.