And Now Some Sparklines

September 4, 2014

Yesterday I wrote about creating graphs in Ruby using the Gruff gem. While I was researching the Gruff gem, I came across another library written by Geoffrey Grosenbach called Sparklines.

A sparkline is a tiny graph; it’s often drawn without an axis. It shows the general shape of some plottable data. Most commonly you will find Sparklines used to chart temperatures or stock market price. Sparklines are usually embedded in a piece of text, and it is not uncommon for Sparklines to be grouped together as a panel chart.

The term sparkline was coined by Edward Tufte for “small, high resolution graphics embedded in a context of words, numbers, images”. Sparklines can be described as “data-intense, design-simple, word-sized graphics”.

Will often see Sparklines used on sites similar to the WSJ to convey a message about stocks or the economy.

So enough history on Sparklines, let’s write some code that will display the Google stock price for the last six months.

Great so first we are going to need some data, just as we did yesterday we are going to use Yahoo Finance and download the historical stock price for Google for the last six months. I downloaded the file and kept the default name of ‘table.csv’.

As always we are going to need to install a gem, so add the ‘sparklines’ gem to your Gemfile or run the command ‘gem install sparklines’

gem 'sparklines'

Here is the complete code.

In our Ruby file we are going to need three require statements one for ‘csv’, another for ‘sparklines’ and the last one is for ‘base64’. We are going to read the ‘table.csv’ so therefore we need the require to ‘csv’, we are obviously going to display our data as a Sparklines hence the reference to ‘sparklines’ and lastly we are going to embed our Sparkline in an HTML page since it looks much better than saving it to a file.

The code is very straightforward, the real logic starts happening at line 19, the rest of the code is just plumbing. So using CSV we read out the data from the CSV file, we get the closing stock price for each day by using the ‘collect’ method.

A call to ‘generate_sparkline’ is made which in turns calls the Sparklines ‘plot’ method that takes in the data and options that can be set on the Sparkline. The ‘plot’ method returns the binary data for our Sparkline. Since we are embedding this Sparkline in an HTML page, we go ahead and create an ‘img’ tag and set the ‘src’ attribute equal to the BASE64 representation of our binary data.

Once we have done all of this we can go ahead and write this ‘img’ tag to an HTML file using built-in functionality in Ruby.

The result of this is:

NYSE: GOOG (google) Closing Stock Price

Pretty neat right? I think this is great, and there are a lot more things possible with this library like changing the color, using a bar chart, etc. I encourage you to check the library out and play with it! One thing I will say is that the library is very old, there are still 5 open issues on GitHub but for the most part I think the library is stable and quite possibly it is done.


Discussion, links, and tweets

My name is Deon Heyns and I am a developer learning things and documenting them in realtime. Python, Ruby, Scala, .NET, and Groovy are all languages I have written code in. I appeared in the New York Post once. I host my code up at GitHub and Bitbucket so have a look at my code, fork it and send those pull requests.

comments powered by Disqus