Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

code A guest post by Tom Barker, a software engineer, an engineering manager, a professor and an author. Currently he is the Senior Manager of Web Development at Comcast, and an Adjunct Professor at Philadelphia University. He has authored Pro JavaScript Performance: Monitoring and Visualization, Pro Data Visualization with R and JavaScript, and Technical Management: A Primer, and can be reached at @tomjbarker.

Continuing the theme of JavaScript Data Visualization libraries that I’ve been writing about, this time I’ll be looking at Flot. In previous posts I looked at D3, InfoVis, and Processing.js and saw that they each fell into one of two camps: they provided an interface either for drawing shapes that could be used to create visualizations, or for drawing visualizations directly, much like R. So, for example, while D3 provided append(“rect”) functionality to draw a rectangle that could be used to craft a bar chart, InfoVis provided a $jit.BarChart() function that would draw a bar chart based upon the data and parameters passed into it.

Flot falls very much into the latter category. Flot was created by Ole Laursen and is maintained by David Schnur. It is available for download at http://www.flotcharts.org/.

Much like InfoVis, the workflow for using Flot is to define your data and pass that in to your charting function. Much like R, Flot uses a generic plot() that produces different types of charts based upon passed in parameters.

To get started, Flot is dependent upon having jQuery on your page so be sure to include both libraries in the head section of your page.

Flot also needs a placeholder to draw the chart into. We’ll create a div named chartDiv:

From there we can create a variable to hold our data. Flot generally expects an array of coordinates. For our purposes we’ll create a data structure named data.

The plot() function is available from the jQuery $ namespace and accepts three parameters. The first is the name of the div to draw the chart into, the second is the variable that holds the data to bind to the chart, and the third is a configuration object that defines the chart that will be drawn.

If we want to draw a bar chart from the data we have defined we can call plot like so:

Notice that we define options for the bars object in the data structure. This produces the bar chart we can see below.

fig1

Note the grid behind the chart; we can configure this as well in the object that we pass in to plot, using a grid object.

If we wanted to assign some margins around the grid and give it a gradient background, we could pass in the following:

This creates the chart we can see here:

fig2

If we were to take that same data set and create a line or an area chart from it, we would instead pass a data structure into plot() that defined options for a series object instead of a bars object, much like this:

This produces the chart we can see here:

fig3

Let’s changes things up a little and create multiple data sets. We’ll create two variables, one for video bugs and the other for cart bugs, both to represent imaginary bug backlogs for features in a theoretical web site that we are running.

These objects each have a property named label and a property named data. The label property is what will show up when we make a legend for our chart, and the data property holds the coordinate data that we had earlier:

In the second parameter that we pass in to the plot function, we will pass an array that holds both data objects. We also include a legend object with the show attribute set to true:

This produces the following chart:

fig4

Pros and Cons

Flot is easy to use and if you are already using jQuery, it is the natural choice to extend that functionality to include plotting capabilities. This has been just a sampling of what you can do with Flot. For a deeper dive into the API, definitely check out the API Reference, available here: https://github.com/flot/flot/blob/master/API.md.

The main limitation of Flot is that it only supports bar, line, area and point charts. Of the libraries that we’ve looked at so far, the main one to compare Flot to would be InfoVis.

InfoVis supports more types of charts, and if you are not already using jQuery, then InfoVis has a smaller payload to include on your page. InfoVis is 162kb compressed, while Flot and jQuery are 194kb compressed, combined (52kb and 142kb respectively).

Ultimately, the choice between Flot and InfoVis comes down to what type of chart you want to use, since the more intricate hierarchical charts like Heatmaps or nodes are not supported in Flot.

For more details about data visualization, see the resources below from Safari Books Online.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Instant jQuery Flot Visual Data Analysis is a practical guide to take you through the basics of using Flot to visualize your data; the book describes Flot’s functionality in dedicated sections that include code, screenshots, and detailed explanations so that you can learn to produce charts in minutes.
Pro Data Visualization using R and JavaScript by Tom Barker, makes the R language approachable, and promotes the idea of data gathering and analysis. You’ll see how to use R to interrogate and analyze your data, and then use the D3 JavaScript library to format and display that data in an elegant, informative, and interactive way. You will learn how to gather data effectively, and also how to understand the philosophy and implementation of each type of chart, so as to be able to represent the results visually.
Developing a D3.js Edge is aimed at intermediate developers, so to get the most from this book you need to know some JavaScript, and you should have experience creating graphics using D3. Many examples created in the real world with D3, can best be described as “spaghetti code.” So, if you are interested in using D3 in a reusable and modular way, which is of course in line with modern development practices, then this book is for you!
Pro JavaScript Performance: Monitoring and Visualization by Tom Barker, gives you the tools to observe and track the performance of your web applications over time from multiple perspectives, so that you are always aware of, and can fix, all aspects of your performance.

Tags: D3, Flot, InfoVis, Javascript, jQuery,

Comments are closed.