Sparklines using Flot

A friend from university sent me a link to a article about ‘sparklines’. As the article title states, sparklines are intense, simple, word-sized graphics.

The article:
http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR

This visualisation style fits in well with one of the projects I am working with that displays a 2D matrix of latencies between national servers. Currently it displays a single latency value (the mean RTT) inside each cell. It would be nice if a sparkline could be placed in each of the cells to give a summary of the last two hours of latency data.

The current system in place makes use of the Flot graphing library for producing graphs so I thought I would give sparklines a go using that.

It turned out to be rather straightforward. Here is the final result:

What I did:

1. Turned off the grid – gets rid of all borders, grid lines, ticks and tick labels.
2. Made a series with one data point equal to the last datapoint of the main series – a trick to colour the last point red.
3. Set the max x axis option to 1 unit more than the max datapoint – stops the red point from getting cut off.
4. Draw the graph with the options and series.

$(document).ready(function(){
var data = [ [0, 1], [1, 2], [2, 2], [3, 2], [4, 2], [5, 3], [6, 4], [7, 2], [8, 2], [9, 3], [10, 5], [11, 5], [12, 4] ];

  var options = {
    xaxis: {
      // extend graph to fit the last point
      max: data[data.length - 1][0] + 1
    },
    grid: {
      show: false
    }
  };

  // main series
  var series = [{
    data: data,
    color: '#000000',
    lines: {
      lineWidth: 0.8
    },
    shadowSize: 0
  }];

  // colour the last point red.
  series.push({
    data: [ data[data.length - 1] ],
    points: {
     show: true,
     radius: 1,
     fillColor: '#ff0000'
    },
    color: '#ff0000'
  });

  // draw the sparkline
  var plot = $.plot('#container', series, options);
});