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.

How to Get Axis Labels in Flot Charts

Have you tried adding axis labels in to any type of Flot chart ? By default Flot does not support axis labels. But it is very easy to get the axis labels with the aid of a simple plugin. So let's see how we can get it done in 3 steps !!!

1. Git clone this repository and place the jquery.flot.axislabels.js inside the folder where you have other Flot related libraries or plugins.

                          git clone https://github.com/xuanluo/flot-axislabels.git

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

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

    3. Pass the axis names and their formatting in the options section along with the other options of X-axis and Y-axis as in the below snippet.

                       xaxis: {

                     axisLabel: 'X',

                      axisLabelUseCanvas: true,

                      axisLabelFontSizePixels: 12,

        axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',

        axisLabelPadding: 5

                 },

            yaxis: {

axisLabel: 'Sin(X)',

        axisLabelUseCanvas: true,

        axisLabelFontSizePixels: 12,

        axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',

        axisLabelPadding: 5

               },

Now you can see the axis labels appearing in your chart as shown in the below image. 

We are done :) It is simple as that.

Have a look at the README section of the cloned repository  for more details. (Although I said a repository, it is just a single file )

You can refer the full sample code given below in-case if anything was unclear.

 
 
 
 
 
 
 
 



 

  

Axis Labels



  

   

Acknowledgement
[1] https://github.com/xuanluo/flot-axislabels

Flot Multi Bar Chart with Text based X-axis Ticks

Flot is a javascript plotting library for jquery which has some nice, interactive and easy to use features. Also unlike some other plotting libraries, almost all browsers supports flot graphs.

In this blog post I'm going to explain how to create a multi-bar chart using flot which has text based tick values in X axis. If you have ever played with Flot, you may know why I emphasize the phrase "text based tick values". Because flot normally supports only number based tick values in X-axis. As you read ahead the post, I'll show up the way how to get your texty ticks in X-axis.

As you can see in the above graph, I'm going to explain a multi bar chart drawn in order to display the number of successful and failed builds per each application. I will explain the code step by step in drawing the chart.

The first script tag contains the excanvas which is needed for support Internet Explorer versions below 9.

Flot placeholder is a jquery object and therefore you need to add the jquery.js. And then comes the file that is responsible for drawing all these flot charts which is jquery.flot.js. All the flot related library files can be checked out from the flot github location. (Note: To draw this graph we do not need all those files, but you might need them when trying with other types of graphs or other flot features.)

By default Flot doesn't come with the support for axis labels. The file jquery.flot.axislabels.js is included to make it possible to mark the axis names of the graph. In the above graph X-axis is named as App and Y-axis is named as No of builds. You can download that flot plugin from here.

In order to get the multi bar chart to work, we will have to include a plugin called jquery.flot.orderBars.js underneath the above files.  You can download the jquery.flot.orderBars.js from here.

Below given is the initial data set which I need to get a flot multi bar chart.

Now let's look at the format of the data that needs to be passed in to the flot graph.

The format of our initial data will be different from the data that is passed to the flot graph. As I have mentioned above, one reason for that is X-axis of the graph contains text based tick values such as "app4", "app5" and etc. But flot accepts only integer type ticks for the X-axis. So what we do is we come up with some integer mapping to represent each X-axis tick which is text based.

[1, "app4"],
[2, "app5"],
[3, "app6"],
[4, "app7"],
[5, "app8"]

So we map "app4", "app5" and etc with the integer we selected according to the above mapping.(instead of "app4" we put 1, for "app5" we put 2 and so on ) Hence the data that we will be passing to flot will take the following format.

var build_pass_data = [
                [1, 4],
                [2, 1],
                [3, 1],
                [4, 4],
                [5, 3]
            ];
var build_fail_data = [
                [1, 2],
                [2, 3],
                [3, 3],
                [4, 3],
                [5, 6]
            ];

var data = [
            {label: "PASS", data: build_pass_data, bars: {fillColor: "#336600"}, color: "#336600"},
            {label: "FAIL", data: build_fail_data, bars: {fillColor: "#E41B17"}, color: "#E41B17"}
           ]

Along with the data we will pass the fill color and the border color of the bars as well.

Then we have to tell the flot about the above mapping we used. That information is passed to the flot options. So our options section is as follows.

var options = {
                xaxis: {
                    min: 0,
                    max: 7,
                    mode: null,
                    ticks: [
                        [1, "app4"],
                        [2, "app5"],
                        [3, "app6"],
                        [4, "app7"],
                        [5, "app8"]
                    ],
                    tickLength: 0,
                    axisLabel: "App",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
                    axisLabelPadding: 5
                }, yaxis: {
                    axisLabel: "No of builds",
                    tickDecimals: 0,
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
                    axisLabelPadding: 5
                }, grid: {
                    hoverable: true,
                    clickable: false,
                    borderWidth: 1
                }, legend: {
                    labelBoxBorderColor: "none", 
                    position: "right"
                }, series: {
                    shadowSize: 1, 
                    bars: {
                        show: true, 
                        barWidth: 0.13, 
                        order: 1
                    }
                }
            };

You might notice that under the "ticks" of xaxis we have placed our mapping. Also note how we have mentioned the X-axis name and the Y-axis name and their formatting.

Finally we need to pass the data and the options to the flot placeholder.

$.plot($("#placeholder"), data, options);

Additionally we have to specify the css of the placeholder,legend and etc for the better look and feels of the graph.

Now we are done with the Flot Multi-bar chart !!!

I have given the complete code below in-case you need any reference. (enclosed the following code within two html tags.)

Enjoy plotting with flot :)