# 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.

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
},
}];

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

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

### oughton

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.

2. Thanks very much for this! Just what I needed. Best regards Hugh

1. No problem Hugh, happy to help! 🙂

3. Patrick says:

Thanks 🙂 That was so damn straightforward!