Saturday, October 26, 2013

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 :)



    
    Flot Multi Bar Chart

    

    
    
    
    
    

    




17 comments:

  1. Hey thanks alot proud to see a Sri Lankan giving out tips :)

    ReplyDelete
    Replies
    1. Thanks Marlin for the compliment :)

      Delete
  2. hey great work Tanya . You saved my day .

    ReplyDelete
    Replies
    1. Good to hear that. Thank you for the appreciation.

      Delete
  3. I want to add
    break in axis label.How can it be done?

    ReplyDelete
    Replies
    1. Hi Nikhil,

      You can do something like this. Add the flot axis label plugin as mentioned in this blog post [1].
      And then add the following snippet in your options area.

      ---------------------------------------
      xaxis: {
      axisLabel: 'Application ADD BR TAG HERE name',
      axisLabelUseCanvas: false,
      --------------------------------------

      [1] http://tanyamadurapperuma.blogspot.com/2013/12/how-to-get-axis-labels-in-flot-charts.html

      Hope this helps.

      Thanks,
      Tanya

      Delete
    2. In the place where I have mentioned ADD BR TAG HERE, add the html br tag [1]

      P.S. : When I place the br tag, Blogger render the html content.

      [1]http://www.w3schools.com/tags/tag_br.asp

      Delete
  4. You are awesome, Tanya. You saved my day!!! :)
    I was trying to plot multi-series bar chart since couple of days..
    But did not find any examples other than those for time series.

    Cheers,
    Kiran

    ReplyDelete
    Replies
    1. Glad to hear that Kiran. Thanks.

      Tanya

      Delete
  5. Hi,

    I have downloaded flot today (01-26-2015) and I´ve tried your example but the bars apperas one on other instead one beside other.

    I checked the code and finally copied your code to a blank html file and runned but the problem persists.

    It would be a bug on the last version of flot?

    Thanks,

    Jerry - Brazil

    ReplyDelete
  6. Will try this and let you know. Sounds authentic. Superb documentation by the way ! :)
    thanks,
    Nanda

    ReplyDelete