Creating a Horizontal Bar Chart With Flot.js

November 26th, 2013 - Posted by Steve Marks to Javascript / jQuery, Web Development.

I’ve been working with the jQuery Flot library quite a bit recently, and have already blogged about some of the problems I’ve had to overcome. This post isn’t necessarily about a problem. More of a ‘How To’ after I struggled to find any documentation or tutorials on this particular scenario.

The scenario I was trying to achieve was a horizontal bar chart. As charts go, this didn’t seem to be a very popular layout so I began to worry whether it was even possible at all. Luckily though, after piecing together snippets from various sites I managed to work it out.

Let’s begin by starting with a very simple bar chart, then work our way up to the horizontal bar chart, and more.

Step 1: Create a simple bar chart

Creating a standard bar chart with Flot is easy and can be achieved by doing something like so:

<div id="my_bar_chart" style="width:400px; height:400px"></div>
// Set up our data array
// The first part of each element specifies it's position on the x-axis
// The second part is the value, or height of the bar
var my_data = [[0, 3], [1, 6], [2, 5], [3, 2], [4, 8]];

$.plot($("#my_bar_chart"), [
{
    data: my_data,
    bars: {
        show: true
    }
}
]);

This will produce the following:

Flot.js Bar Chart
Easy enough right? We’re simply initialising the data, then plotting the chart. Now let’s look at turning this into a horizontal bar chart.

Step 2: Turn it sideways

Fortunately turning the chart on it’s side can be achieved by adding a simple setting. Using the code above, let’s add this setting and look at the results:

// Set up our data array
var my_data = [[0, 3], [1, 6], [2, 5], [3, 2], [4, 8]];

$.plot($("#my_bar_chart"), [
{
    data: my_data,
    bars: {
        show: true,
        horizontal: true
    }
}
]);

And the result…

flot-simple-horizontal-bar-chart
Okay good. It’s now horizontal, however there’s a slight issue with the data being plotted: The first part of each data element is now the value/width of the bars, and the second part is the position on the X-axis.

Step 3: Correct the data

Fortunately this change is easy. Let’s swap the data elements around and look what happens:

// Set up our data array
var my_data = [[3, 0], [6, 1], [5, 2], [2, 3], [8, 4]];

$.plot($("#my_bar_chart"), [
{
    data: my_data,
    bars: {
        show: true,
        horizontal: true
    }
}
]);

We should now see that it’s plotting the points correctly:

flot-horizontal-bar-chart
Perfect. So we’re nearly there. There’s just one more step that I like to take…

Step 4: Add labels to the axis

In my scenario I wanted to add labels to my Y-axis. Fortunately the Flot.js library makes this task nice and easy:

// Set up our data array
var my_data = [[3, 0], [6, 1], [5, 2], [2, 3], [8, 4]];

// Setup labels for use on the Y-axis
var tickLabels = [[0, 'Yes'], [1, 'No'], [2, 'Maybe'], [3, 'Sometimes'], [4, 'Never']];

$.plot($("#my_bar_chart"), [
{
    data: my_data,
    bars: {
        show: true,
        horizontal: true
    }
}
],
{
    yaxis: {
        ticks: tickLabels
    }
}
);

And the final result:

flot-horizontal-bar-chart-labels
So there you have it. You’ll probably want to modify your chart further but hopefully that’s provided you with the first steps on creating your horizontal bar chart with Flot.js.

This entry was posted on Tuesday, November 26th, 2013 at 10:08 pm by +Steve Marks and is filed under Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (2)
  1. Marcio says:

    Thanks, very useful.

  2. mnt says:

    Thanks, this helped a lot.