Sparklines in Blogger and WordPress Blog Posts
Sparklines are “small, intense, simple datawords” as defined by Edward Tufte. As he suggests, you can use sparklines to go from the usual single piece of information:
glucose 128
to encoding many more pieces of data with the addition of a sparkline that only takes the space of a single word:
1,4,4,7,5,9,10,11,4,6,3,8,9,2,4,5,6,4,5,12,14,16,14,12,8,14,10,8,3,14 glucose 128 (97 – 135)
If you can’t see the sparkline example above it could be because you’re reading this using an RSS reader which has stripped out the required code, you’re using an old browser (it does work on IE8), or you are blocking Javascript from running.
I have previously created sparklines using small images but getting them aligned and not messing up line heights is generally annoying, not to say time intensive. As discussed in the Dorling Cartogram, Protovis Dashboard, and Google Intensity Map posts, the options for generating graphics in the browser without plugins (i.e. not an image, not using Flash) are expanding with continued development of Javascript libraries.
Thanks to the developers of these libraries, adding sparklines to static html pages is relatively trivial . Unfortunately I’ve found it completely non-trivial to add sparklines to blog posts – other Javascript code typically found as part of a CMS/blog system, combined with where the sparkline code is positioned can cause unexpected, or in most cases, no results. So what are your options?
I started out trying to add most of the Javascript to the <head> section of the html. That typically means editing a file on the server – not hard, but mess it up, and you could take down your whole blog. I had extremely limited success with this, and it also has the disadvantage that you’re always loading the library, even when reading a post that does not contain sparklines.
I finally came up with a solution that: works in modern browsers (can’t use Protovis as IE is not suported), is only loaded when reading a post with a sparkline, and is easy to add to a post. I’ve used the excellent jquery.sparkline plugin. This is additional code that utilizes the jquery library.
So, you need to download the jquery.sparklines file and host it on your server somewhere (ftp it to a directory or perhaps add it to your media library). Start a post and switch to html format (not the visual editor), paste the text below at the top of the post, and take the full URL of where you placed the js file and enter it in the indicated place. You could just change this to the author’s version of the file at http://omnipotent.net/jquery.sparkline/1.5.1/jquery.sparkline.js, but he indicates that his server is sometimes down, so your sparklines would not render. You don’t have to worry about jquery – the given URL is a ‘hosted’ version, but it is preferable to also download and host this yourself.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="URL TO YOUR jquery.sparkline.js"></script><script type="text/javascript">/* <![CDATA[ */ $(function() { $('.inlinesparkline').sparkline('html', {type: 'line', width:'60px', fillColor:'', lineColor: 'grey', spotColor:'black', minSpotColor:'green', maxSpotColor:'red',normalRangeMin:'',normalRangeMax:'',chartRangeMin:'',chartRangeMax:''} ); }); /* ]]> */</script>
I’ve deliberately removed all line breaks – even the ‘plain’ html post editor screws it up otherwise. If something’s not working, check for extra line breaks (view source of the post to look for extra <br> or <p> tags)
To create a sparkline, just add the following where you want the sparkline:
<span class="inlinesparkline">1,4,4,7,5,9,10,11,4,6,3,8,9</span>
Substituting for your data 1,4,4,7,5,9,10,11,4,6,3,8,9 obviously. The top section of code has formating options. I’ll leave those for another post, plus how you would add multiple sparklines with different formating.
EDIT: On a subsequent post, I advocate the use of title=”your sparkline explanation here” in the span tag to provide more information about the sparkline. See this post and comment.
Second Edit: Even though I really like the sparklines produced by this method, I would advocate using Google Chart Tools as described in this post.
Alex Kerin
When something goes wrong, check the added URLs are correct for the js files (View source of your post, click on the links to make sure they bring up the js files). Then check for extra p and br tags in the script.
Finally look for things like the double quote marks being changed to the fancy open/close type, and <> symbols being changed to ampersand gt ;
Effective Use of Sparklines in Blog Posts « Data Driven
[...] of your post, adding context that readers will appreciate. My recent post showing how to add sparklines to WordPress and Blogger make it (relatively) easy to utilize these word-sized [...]
Ark
I’m surprised you’re pushing a technology that doesn’t work in email or in rss readers for bloggers to use.
What’s wrong with a simple image? – Google will generate sparklines for you easily using the charts api. I’m sure there are other services too.
Alex Kerin
The image generating API is nice from Google, and I agree that perhaps this would be a better solution – perhaps you could suggest the code that would generate similar sparklines
Alex Kerin
Another point to consider is that many people (not necessarily me) want people to visit their website rather than have their content read through RSS, either for advertising revenue purposes or to promote services. If sparklines were an added incentive to visit the site, maybe that would be that would be a benefit. I don’t agree with this, but it is a point to consider.
Ark
Here’s a sparkline url
http://chart.apis.google.com/chart?cht=ls&chs=75×50&chd=t:27,25,60,31,25,39,25,31,26,28,80,28,27,31,27,29,26,35,70,70
You just add it to your img src and it makes an image.
those numbers at the end of the url are the date you’re trying to plot.
I wonder if images are allowed in comments?
Lots of code samples and documentation at: http://code.google.com/apis/chart/image_charts.html
You can get fancier with the interactive charts on your own site but those require javascript and sometimes flash (annotatedtimeline like Google Finance Graphs).
Alex Kerin
Adding this as a sparkline in some text:
finally came up with a solution that: works in modern browsers (can’t use Protovis as IE is not suported), is only loaded when reading a
post with a sparkline, and is easy to add to a post. I’ve used the excellent jquery.sparkline plugin. This is additional code that utilizes the jquery library
Alex Kerin
Hey, that works nicely – I added a transparent background, reduced the line thickness, chart height, and aligned the image at the bottom of the text. It’s certainly a great option for being able to be read in more than just a browser.
I couldn’t quickly see if you could add markers for last, first, high, low automatically, but that’s a pretty good compromise for not having to host Javascript files.
Using Google Chart API to create dashboards and sparklines « Data Driven: Data Analytics, Dashboard Design
[...] few posts back I talked about using a plugin to the jquery javascript library to create sparklines in blog posts. One of my readers suggested using Google’s chart api to instead create the sparklines. From [...]