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:
- Turned off the grid – gets rid of all borders, grid lines, ticks and tick labels.
- Made a series with one data point equal to the last datapoint of the main series – a trick to colour the last point red.
- Set the max x axis option to 1 unit more than the max datapoint – stops the red point from getting cut off.
- 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); });
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.
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.
oh got yours working it was this https://github.com/ReturnPath/flot-plugins i was having trouble with
Thanks very much for this! Just what I needed. Best regards Hugh
No problem Hugh, happy to help! 🙂
Thanks 🙂 That was so damn straightforward!