Small but beautifully functional data – Windows Phone Sparkline

Brent Schooley / Tuesday, May 22, 2012


“A sparkline is a small intense, simple, word-sized graphic with typographic resolution. Sparklines mean that graphics are no longer cartoonish special occasions with captions and boxes, but rather sparkline graphic can be everywhere a word or number can be: embedded in a sentence, table, headline, map, spreadsheet, graphic.”    -Edward Tufte, 2004

A new control for your compact data visualization needs

The sparkline can be a wonderful tool to add to your data visualization arsenal. It’s an especially useful control in a mobile context because screen space is at such a premium.  To help mobile developers use this fantastic data visualization technique, we have introduced the Windows Phone Sparkline control in our 2012 Volume 1 release of NetAdvantage for Windows Phone.

Visualizing Patient Data

Consider an application for monitoring patient vitals in an emergency room.  A doctor in this setting doesn’t have time to spend drilling down through an application’s hierarchy to get to critical information that could literally be the difference between life and death.  Having easy to discern data available in a compact form becomes essential in this situation.  The sparkline can allow this data to be shown in a compact form as in the following screenshot showing glucose readings for patients:


(click the thumbnail image to view a more detailed image)

Imagine that more than just glucose was shown for each patient.  The doctor can quickly scan over the patients to see if any are outside of healthy vital ranges and immediately attend to them.

Visualizing Stock Data

Another great use for the sparkline is showing trends in stock values in a compact format.  The following example shows a 52-week period for AAPL, MSFT, and GOOG.  There are markers for the Open, Close, Low, and High values for the period for each stock.  The information is very easy to scan and it’s easy to tell how the stock is performing even without reading the actual values.


Here is the same data using the Area sparkline type:


Visualizing Win-Loss Data

There is one other sparkline type that can be helpful in showing situations where there are win/loss conditions.  The example I chose for this was the 2011 NFL Standings.  The high contrast between win and loss makes it easy to scan and distinguish teams that had good seasons from teams that had bad seasons:


Now go use this thing already!

I know at this point you can’t wait to try out the Sparkline control.  If you have any comments or questions, feel free to leave them in the comments below or find me on Twitter @brentschooley.