Degrafa + Data Part 2: The Sparkline

原文链接：http://www.insideria.com/2008/04/degrafa-data-part-2-the-sparkl.html

I've expanded upon the ideas of my last post: "Degrafa + Datagrids = Visual Display of Data", and I'm continuing to explore data visualizations using Degrafa. This time, I've decided to tackle the sparkline.

From wikipedia:

Sparkline is a name proposed by Edward Tufte for "small, high resolution graphics embedded in a context of words, numbers, images".

 

Tufte describes sparklines as "data-intense, design-simple, word-sized graphics". Whereas the typical chart is designed to show as much data as possible, and is set off from the flow of text, sparklines are intended to be succinct, memorable, and located where they are discussed. Their use inline usually means that they are about the same height as the surrounding text.

 

Everyone's heard the phrase "a picture is worth a thousand words", and this next example is more proof of that. We all know the usefulness of charts at expressing numeric data in an easy to grasp format. I'm not embedding the sparkline in text, as Tufte describes, however I'm using it in a Flex datagrid component.

First, here are a few simple examples of my sparkline component:

<script src="http://www.tricedesigns.com/portfolio/degrafasparkline/swfobject.js" type="text/javascript"></script>

http://www.tricedesigns.com/portfolio/degrafasparkline/DegrafaSparkline.html

<script></script>

 

It can be used standalone as a very simplistic chart, or a stylized version. Sparklines are traditionally minimalistic in appearance, so that they clearly express the data. This component gives flexibility for the developer to customize it how they please. It is built using Degrafa, so it is very easy customize the appearance. The first sparkline is a very basic one: no background and a 1px black stroke. The second uses a gradient fill and a thicker stroke, and the third uses a bitmap fill, and a gradient stroke.

Now, here is a more-interesting application of the sparkline... Using the sparkline as an item renderer in a datagrid. This adds another dimension to the tabular data. Not only are you able to easily see a server, its current disk usage, but now you can see its cpu usage history. You could use another sparkline to show disk usage over time. If you were to express the same amount of information in words, you would be reading and analyzing for a long time, and you still might miss part of it.

<script src="http://www.tricedesigns.com/portfolio/degrafasparkline/swfobject.js" type="text/javascript"></script>

http://www.tricedesigns.com/portfolio/degrafasparkline/DegrafaSparklineDatagrid.html

<script></script>

 

Thanks to Juan and Jason from the Degrafa team for giving me a few pointers how to best use Degrafa for this.

You can launch these examples in a new window at:

Simple Sparklines
http://www.tricedesigns.com/portfolio/degrafasparkline/DegrafaSparkline.html
Datagrid Sparklines
http://www.tricedesigns.com/portfolio/degrafasparkline/DegrafaSparklineDatagrid.html

You can view the source code at:
http://www.tricedesigns.com/portfolio/degrafasparkline/srcview/index.html

You can download the source code at:
http://www.tricedesigns.com/portfolio/degrafasparkline/srcview/Degrafa Sparkline.zip

 

Useful Link:

Sparklines: theory and practice