Sparklines – Part I

Bona Vista site is closed. Image from archieve


Hi. This is my first opus as a programmer, so put away your piercing-cutting and blunt heavy objects. Today we’ll talk about sparklines which are also known as microcharts.

Preface
I joined Deep Shift Labs in November last year. Having only basic knowledge of programming (including PHP), I decided to try myself. The guys were willing to look at me and gave me a few tasks to do. “If you can get things done – join in!” I did not want to think about it in any other way and therefore took up the hatchet started with entu .. anthu.. enthusiasm! The first task was called “Project msFouine”, if you’re interested – post a comment and I’ll talk about it next time. The second task was micrographics or sparklines.

What are sparklines? It turns out, they were invented by a well-known, in the narrow circles of infographics specialists, personality professor Edward Tufte. A little research and especially a read of a discussion on the site of the inventor, brought a lot of useful information on how to properly use sparklines, what are the implementations and where they are used in practice. As a result I created a list of links you can find below diluted with my comments.

History of discovery
Sparklines were discovered in the laboratory on BonaVista Systems site, and for a long time DSL guys though their real name is MicroCharts. They immediately felt in love with them, and although the need to build a dashboard then fell away, sparklines were remembered and just waited for the occasion to be used. Recently, such an occasion materialised, and a more thorough search led us to this page, where we learned their real name – sparklines and their real inventor.

Implementations
- PHP
- PHP + GD – http://sparkline.org/ – we did not like it. Look at the Wiki page – there are many references to software implementations in different languages and commercial packages.
- PHP + GD – nice looking but only bars.

JavaScript
- http://overstimulate.com/projects/svg
- http://www.omnipotent.net/jquery.sparkline/
- http://willarson.com/code/sparklines/sparklines.html#bar4

Interesting examples and facts
It turned out that we had seen sparklines before, but did not know it was them.

Here is a way to draw sparklines using Google Maps API. As usual, Microsoft patented someone else’s invention and added it to MS Excel 2010. Another commercial product for MS Office from Bissantz. Xerox Parc, as always, ahead of all – in anticipation of the new Steve’s and Bills to come, to look at and to … We should say that, perhaps sparklines have another inventor – less-known Pete Zelchenko.

And another non-obvious use of sparklines is in the music player Amarok. Professor Tafte is using the old forum engine BBoard, which does not provide a link to a post, and so we have to bring it here as a quote: “Amarok is free music player for Linux, like iTunes, but more robust. One feature calculates a “moodbar” for each track by computing a fast Fourier transform! In the screenshot below Beethoven’s sonatas are arranged by mood. Redder is lower frequency, darker indicates higher amplitude. In the lower right the current track’s mood bar is recapitulated with a pointer indicating where you are in the music; one quickly gets a sense of what is coming. My only want is that they should be displayed on a constant time scale.”

Well, that’s all I wanted to share, and now it is time to implement our own requirements for sparklines.

My task was to implement PHP + JpGraph, because this library has long been used in the project, which sparklines, according to the guys, finally found their application in. Why not Google Graphs? We implement it inside commercial application and it can not rely on the free service from Google. Why not JavaScript? All reports system generates are created not only in HTML, but also in PDF and Excel. If implemented in JS for HTML, we will need other parallel implementations for PDF and Excel.

And so, although I’ve heard something about GD in PHP and my first thought was to render everything from scratch with the help of this library, I began experimenting with JpGraph. This is an order of magnitude easier than creating graphs from scratch, and in just a couple of hours of practice with JpGraph I managed to produce such a graph.

This result was achieved with the following code:

   //my JpGraph is in src
   require_once ('src/jpgraph.php');
   require_once ('src/jpgraph_line.php');
 
   $ydata = array(80,60);
   $y2data = array(60,75,70,95,50);
   $y3data = array(70,70,70,70,70,70,70);
   $y4data = array (50,80,75,70,73);
 
   $xdata = array(0,1);
   $x2data = array(1,1.25,1.5,1.75,2);
   $x3data = array(0,8);
   $x4data = array(2,3,4,5,6);
 
   $graph = new Graph(200, 60);   
 
   $graph->SetScale("linint");
   $graph->SetShadow();
 
   $graph->img->SetMargin(0,0,0,0);
   $graph->ygrid->Show(true,true);
   $graph->xgrid->Show(true,false);
   $lineplot3 = new LinePlot($y3data);
 
   $lineplotD = new LinePlot($ydata, $xdata);
   $lineplotD2 = new LinePlot($y2data, $x2data);
   $lineplotD4 = new LinePlot($y4data, $x4data);
 
   $graph->Add($lineplot3);
   $graph->Add($lineplotD);
   $graph->Add($lineplotD2);
   $graph->Add($lineplotD4);
 
   $graph->xaxis->HideLabels();
   $graph->yaxis->HideLabels();
 
   $lineplot3->SetColor('green');
   $lineplotD->SetColor('blue@1.0');
   $lineplotD2->SetColor('red@1.0');
   $lineplotD4->SetColor('blue@1.0');
 
   $graph->yaxis->SetColor("blue");
   $graph->Stroke();

This graph is also valuable for me because that is not just one line drawn here, but three (the blue part of the graph, gray and baseline). This was done because I was aware of the need to highlight problem areas on a graph so that users can easily detect problems even in small sparklines. The most obvious way to do so is to make part of the graph in a different color highlighting a problem area. It is obvious that this graph is far away from what we wanted.

In the meantime, technicians from the Deep Shift Labs made the initial list of requirements. Initial – because even now, two months after events I write about, they are changing. They look at the result, scan it with a magnifying glass and polish it adjusting to a practical ask they need to solve, but I’ll write about it later. I give the word to Taftes’ evangelist in the laboratory – Igor.

“Well, well … We need sparklines:

- they should look as nice as BonaVista ones

- implement only line graphs for now as we will need them for sure

- graphs should have a transparent background

- test everything with default size 100x30px with the ability to change it. This implies that we can change it to 600×30 or 300×40, but not to 800×600, since this is already not a sparkline. Making a universal quality library is a difficult and often excessive task we want to avoid.

- line color can be changed by parameter

- reference line, or simply a horizontal line, can be shown and specified by its position and color

- a sparkline graph will be build by a function/method which accepts an associative array of date/time value as an input parameter (here, for the beginning we simplified the task, to add complexity by making it work with a universal input array later)”

In Part II I will share problems I hit, ways they were solved and how first sparkline marked ‘Made in Deep Shift Labs’ was born.

Written by Dima Yaroshenko, edited by DSL team & Anton Kryltsov

Print this post | Home

2 comments

  1. Tony Bellingham says:

    Hi

    Can Linux Gnumeric display sparklines?

    Thanks.

  2. Igor Kryltsov says:

    No idea, Tony :)