Sean Gerety : Friday, December 03, 2004

Friday, December 03, 2004 - Posts

XAML Sparkline example

I have long been a fan of Professor Tufte's work. He has been a proponent of a providing a higher data density in information display and commingling of data and text. One of his ideas is sparklines: "small, high-resolution graphics embedded in a context of works, numbers, images". There is already quite a bit of discussion on sparklines on his site, and a draft chapter from his forthcoming book Beautiful Evidence.

http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR&topic_id=1&topic=
http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0000Lk&topic_id=1&topic=

Since Avalon, XAML and Longhorn will give us more control and a greater data density (If the price of monitors come down), sparklines are a great exercise to try out XAML and Avalon's capabilities.

Here is a first attempt at building a sparkline. I had tried various methods for piecing the sparkline together from using a single Canvas to using DockPanel's to nested Canvases. Here's a couple of shots.

Here's what I did.

Go to MSN money or a finance site and grab a cvs (comma delimited) of a stock for a year. Transform the data in to a position pairs (incremental value, data value). This is your graph line.
Grab the high and low value for display and the stock symbol name. I then put each item into it's respective canvas. One canvas for the stock symbol, one for the graph line and one for the high low values.
Then using a TransformDecorator rescale the graph to fit Tufte's recommended ratio. (see thread). You'll have to move the graph line canvas up hence the negative value for the graph line canvas.

All in all it's pretty easy. Here's the next steps.

Accept a xml file for input.
Create an mixed text and sparkline example. I just have to get the correct tree structure.

Here's some of the usage scenarios of Longhorn, XAML and sparklines.

Dr. Smith using his tablet PC enters a patient’s room and pulls up the patients “chart”. This is done via a web service that pulls data from the in-room instruments and historic data from the patient’s doctor and hospital records. On the chart is 20 plus sparklines with data from the last 60 days. The doctor can view the sparklines and get a quick look at the overall health of the patient. Dr. Smith is curious about the glucose levels of his patient and “mouse’s” over the glucose sparkline with his tablet pen. The sparkline gets a zoom icon on the bottom right corner and Dr. Smith clicks the sparkline. The sparkline then zooms out (think of magnify plus setting the sparkline to the top of the z-order) and the doctor can then see detailed information to make a more informed decision.

Or…

Alternate views of perfmon. Instead of values being over laid and obfuscated, you would instead get a stacked and moveable view of sparklines. You could re-arrange the sparklines to your liking.

Or…

You want to watch your stocks, so in Longhorn you add a new tile app that presents one year of stock data as a sparkline tile on the sidebar that pulls its data from a web service via Indigo. This tile app would have the same zoom function as above.

And last but not least the code.

posted Friday, December 03, 2004 10:47 AM by Sean Gerety with 9 Comments

Sean Gerety

Search

Archives

News

Navigation

Post Categories

Links

Friday, December 03, 2004 - Posts

XAML Sparkline example