Visualizing Data with Flot

There are a lot of tutorials on how to make CSS bar graphs. But sometimes, bar graphs aren't enough. What if our data tracks change over time and a line graph is more appropriate? Or maybe we're not satisfied with just a bar graph. Enter Flot, ajQuery plugin that lets us make good looking graphs with ease.

In a data centric world, we often have to display large amounts of data on the web. Generally we show a table of values with headings and if we really wanted to get fancy we would use a picture of a graph. People like pictures. I like pictures. Why? Because it is far easier to interpret data when it is in visual form. However, creating a picture graph and updating it with new data can be a pain. In this tutorial, we’re going to use a jQuery plugin called Flot to create graphs on the fly.

Step 1

To start, we need some data. For this tutorial, we’re going to be using some GDP data for a few different countries I found on Wikipedia. Unfortunately the data only goes to 2003 but since this isn’t a lesson on economics, it will suffice. Let’s put the data into a simple table and add a few lines to describe it.

 1   2   3   4   5 Flot Tutorial  6 7   8 9   10 11 
 12   13 
GDP, based on exchange rates, over time. Values in billion USDs.  14 
200320022001200019991998
USA10,88210,38310,0209,7629,2138,720
EU10,9709,0408,3038,2348,9018,889
UK1,7651,5641,4301,4381,4601,423
China1,5751,4341,3451,2521,1581,148
India599510479457447414
 15   16   17   18   19   20   21   22   23   24   25   26   27   28   29   30   31   32   33   34   35   36   37   38   39   40   41   42   43   44   45   46   47   48   49   50   51   52   53   54   55   56   57   58   59   60   61   62   63   64   65   66   67   68   69   70 71 

GDP, based on exchange rates, over time. Values in billion USDs.

 72 73   74  

Notice that the table is contained in a div with an id of “plotarea.” The graph we will be creating later will replace the table contained inside this div. The table looks a bit ugly at the moment so let’s add some CSS to make it more presentable.

 1  

You should have something that looks like this.

Now that we have all the data in a table, we can start adding in the JavaScript that will create a graph for us. Technically, we don’t have to have a table, but it’s nice to have for two reasons:

1. Accessibility. There are many blind web users out there and it is important to make everything on your website screen reader friendly. Screen readers cannot interpret graphs created by Flot.
2. Degradability. A small number of web users disable JavaScript. Although this is a very small minority, it is not much more work to add a table so that they can view the data as well.

Step 2

Link the required JavaScript libraries. There are two of them, plus one more for IE support. We need to link jQuery first and then the Flot library since it depends on jQuery. Since Flot uses the canvas element to draw the graphs, we need to include the ExplorerCanvas script which emulates the canvas element in IE. Firefox, Opera and Safari users don’t need this so we’ll use conditional comments to make sure only IE users download it.

 1   2   3  

Creating a graph with Flot is quite simple because many of the options have sensible default values. This means you can create a good looking graph with minimal work, but can also tweak it to your liking. To make a basic graph, we need to specify a container element and the data to be graphed. The container element also needs to have a specified width and height, so we’ll use jQuery to set the “plotarea” div to have a width of 500px and a height of 250px.

 1  

The first parameter is a jQuery object of the container element. The second element is a 3-dimensional array where the first child arrays are datasets and the "grandchild" arrays are ordered pairs specifying an X and Y value for a Cartesian plane. Let’s graph the GDP data for the US first.

 1  

The data table we had before should be replaced with a nice look graph. As you can see, the array containing the dataset is contained in another parent array. To graph another dataset, we just add it as another element to the parent array. Let’s add the data for the other countries we had in our table.

 1 var data = [  2  [[2003, 10882],  3  [2002, 10383],  4  [2001, 10020],  5  [2000, 9762],  6  [1999, 9213],  7  [1998, 8720]],  8   9  [[2003, 10970],  10  [2002, 9040],  11  [2001, 8303],  12  [2000, 8234],  13  [1999, 8901],  14  [1998, 8889]],  15   16  [[2003, 1795],  17  [2002, 1564],  18  [2001, 1430],  19  [2000, 1438],  20  [1999, 1460],  21  [1998, 1423]],  22   23  [[2003, 1575],  24  [2002, 1434],  25  [2001, 1345],  26  [2000, 1252],  27  [1999, 1158],  28  [1998, 1148]],  29   30  [[2003, 599],  31  [2002, 510],  32  [2001, 479],  33  [2000, 457],  34  [1999, 447],  35  [1998, 414]]  36 ]; 

We now have a fairly good looking graph, but we don’t know which line is which country! What we need is a legend. Fortunately, Flot supports this and is a matter of putting our datasets in a JSON object and adding a label element.

 1 var data = [  2  {  3  label: "USA",  4  data: [[2003, 10882],  5  [2002, 10383],  6  [2001, 10020],  7  [2000, 9762],  8  [1999, 9213],  9  [1998, 8720]]  10  },  11   12  {  13  label: "EU",  14  data: [[2003, 10970],  15  [2002, 9040],  16  [2001, 8303],  17  [2000, 8234],  18  [1999, 8901],  19  [1998, 8889]]  20  },  21   22  {  23  label: "UK",  24  data: [[2003, 1795],  25  [2002, 1564],  26  [2001, 1430],  27  [2000, 1438],  28  [1999, 1460],  29  [1998, 1423]]  30  },  31   32  {  33  label: "China",  34  data: [[2003, 1575],  35  [2002, 1434],  36  [2001, 1345],  37  [2000, 1252],  38  [1999, 1158],  39  [1998, 1148]]  40  },  41   42  {  43  label: "India",  44  data: [[2003, 599],  45  [2002, 510],  46  [2001, 479],  47  [2000, 457],  48  [1999, 447],  49  [1998, 414]]  50  }  51 ]; 

Step 3

I mentioned before that although Flot has many sensible defaults. While they’re probably be fine for most people, the legend partially obscures some of the data. Flot has a third parameter for passing in options in a JSON object.

 1 \$.plot( plotarea , data, options ); 

To make the data at the far end of the graph a little more visible, we’ll adjust the background opacity and margins of the legend.

 1 var options = {  2  legend: {  3  show: true,  4  margin: 10,  5  backgroundOpacity: 0.5  6  }  7 }; 

Some people (like me) like being able to see exactly where the data points are, so let’s specify in the options to mark each point with a circle of a specified radius.

 1 var options = {  2  legend: {  3  show: true,  4  margin: 10,  5  backgroundOpacity: 0.5  6  },  7  points: {  8  show: true,  9  radius: 3  10  }  11 }; 

Great, we have data points, but where’d the lines go?! Let’s explicitly turn them back on.

 1 var options = {  2  legend: {  3  show: true,  4  margin: 10,  5  backgroundOpacity: 0.5  6  },  7  points: {  8  show: true,  9  radius: 3  10  },  11  lines: {  12  show: true  13  }  14 }; 

Our final code looks something like this:

 1   2   3   4   5 Flot Tutorial  6 7   15 16   17   18   19 20   95   96 97   98 99 
 100   101 
GDP, based on exchange rates, over time. Values in billion USDs.  102 
200320022001200019991998
USA10,88210,38310,0209,7629,2138,720
EU10,9709,0408,3038,2348,9018,889
UK1,7651,5641,4301,4381,4601,423
China1,5751,4341,3451,2521,1581,148
India599510479457447414
 103   104   105   106   107   108   109   110   111   112   113   114   115   116   117   118   119   120   121   122   123   124   125   126   127   128   129   130   131   132   133   134   135   136   137   138   139   140   141   142   143   144   145   146   147   148   149   150   151   152   153   154   155   156   157   158 159 

GDP, based on exchange rates, over time. Values in billion USDs.

 160 161   162  

Concluding Thoughts

There are many possibilities with Flot. The Flot API details all the different options that are available for tweaking your graphs including specifying different graph types, colors, axes, and even enabling interactive features like selection and zooming. Another possibility is to make the entire thing fully dynamic and generate the JavaScript code dynamically with data from a database using PHP.

• Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.