Home Hack of the Day: Using Flot to Display a Graph

Hack of the Day: Using Flot to Display a Graph

Logging statistics is a two-stage process. First, you need to collect the information and store it. Next, you need to expose this information to end users.

It’s quite simple to display a table of stats for users to look at, and this is a good option if you need to provide a detailed breakdown. But for analysing large datasets or simply providing an overview of recent activity on a site, a graph may be a better approach.

Flot: a JavaScript Plotting Library for jQuery

For this example we’ll be using Flot, a jQuery library. To get started you’ll need to download jQuery and Flot. Once you’ve included them in the page header, here’s how you can get a simple line graph to show up.

Preparing the Data

Before displaying the graph, you’ll need to load up the following data:

  1. The values you wish to display in the graph – in this case, we’ll be looking at pageviews recorded in the last 31 days for a specific blog.
  2. The maximum value in the group.

As Flot is a plotting library, you need to think of the coordinates to add each point to the graph. For instance, on the first day the blog recorded 157 pageviews, so you need to plot a coordinate: 0, 157. On the second day, the blog recorded 187 pageviews, so the coordinate for that day would be: 1, 187.

Basically, the end result is a list of values provided in the following format:

[0, 157], [1, 187]

And so on. We can then use the value list in the next section.

Displaying the Graph

First, you need to use the following HTML:

Change the height and width if you wish. Next, you need the following JavaScript:

Ensure you replace INSERT_VALUE_LIST_HERE and INSERT_MAX_VALUE_HERE with the appropriate variables.

A Working Example

You can see a real example of the Flot graph on the profile page of the blog in question.

About ReadWrite’s Editorial Process

The ReadWrite Editorial policy involves closely monitoring the tech industry for major developments, new product launches, AI breakthroughs, video game releases and other newsworthy events. Editors assign relevant stories to staff writers or freelance contributors with expertise in each particular topic area. Before publication, articles go through a rigorous round of editing for accuracy, clarity, and to ensure adherence to ReadWrite's style guidelines.

Get the biggest tech headlines of the day delivered to your inbox

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.

    Tech News

    Explore the latest in tech with our Tech News. We cut through the noise for concise, relevant updates, keeping you informed about the rapidly evolving tech landscape with curated content that separates signal from noise.

    In-Depth Tech Stories

    Explore tech impact in In-Depth Stories. Narrative data journalism offers comprehensive analyses, revealing stories behind data. Understand industry trends for a deeper perspective on tech's intricate relationships with society.

    Expert Reviews

    Empower decisions with Expert Reviews, merging industry expertise and insightful analysis. Delve into tech intricacies, get the best deals, and stay ahead with our trustworthy guide to navigating the ever-changing tech market.