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:

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.
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.
    data: [ data[data.length - 1] ],
    points: {
     show: true,
     radius: 1,
     fillColor: '#ff0000'
    color: '#ff0000'

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

Published by


Senior software engineer with extensive experience in enterprise software development targeting wholesale financial organisations and cloud solution providers.

8 thoughts on “Sparklines using Flot”

  1. could i see a working example of the bullet graph, keep getting Uncaught Invalid dimensions for plot, width = null, height = null even when dimensions are set.

    1. Your example does not use my code. But I can see your problem.

      <div id=”placeholder” style=”width:600px;height:300px;”></div>

      Change the id of the div to “sparkline-ph”. It needs to match the id of the container that you are passing to flot.

Comments are closed.