Sparklines in Flex

My last project was to build a dashboard where the main goal was to prove that it was possible to build Decision Support System using sparklines as the main data visualization component.
So I went searching for sparkline implementations and I found it on several programming languages such as PHP, Ruby and even VB.net. Here is what I consider a good implementation in PHP. Nonetheless, I had to build then using Flex 2 or Flash 9, so I went Flex 2 + Flex Charting API.
Just before getting in more details about the implementation there are a few issues that must be kept in mind when building Sparklines:

  • Sparklines are to represent large collections of data, but yet, sparklines are small, intense, word-sized graphics;

The truth is that it doesn’t make much sense to represent 20 or less values in a sparkline, in fact, the resulting chart would be more like a standard line chart. Still, representing to many values, say 300, in a small space doesn’t make much sense either.
This means that when coding sparklines we must be extremely careful with the length of our data and the amount of screen real estate that we can use.
About being word-sized, this means that in terms of height they should be easily added to a string of text (just like figure A Simple Flex Sparklines showing 300 values that shows a word-wrapped sparkline)

  • Sparklines also provide supporting analytics

Sparklines are more than lines representing values. They can be enhanced with the usage of supporting analytics that should be displayed directly over the sparkline. In this case supporting analytics usually shows the extreme values (high / low, least / most recent values) and the normal range of the values at stake.

Flex Sparkline with supporting analytics

Figure B shows a sparkline with supporting analytics representing a little less than 150 values.

  • Sparklines are intended for fast data comparisons

The ability to show large collections of multivariate data in a very small space turned sparklines into a great tool for performing fast comparisons. But when comparing visual information the subjects of comparison must be represented in the same scale and this is because visual information represented on a specific scale can point out relevant issues that other scales don’t.
Figure C shows the sames values in figure A but in a different width and vertical scale. Figure D on the other hand shows 300 values in a very small space.

Figure C
Flex Sparklines showing same values of Sparkline in figure A
Figure D
Flex Sparkline showing 300 values in a very small space

Implementation:

I’ve implemented the sparklines using Flex charting API.
First, I picked a Line Chart with a line series to represent the data points. Then the next step was to limit the data points length and find a formula to limit also the line height – remember that sparklines are suppose to be word-sized. This was done by setting the max and min limits on the chart vertical axis.
Second step was to add the bar with the normal range values. This could be done using the annotation elements, but I choose to add another series, this time an area series. And this proved to have some advantages over the first option.
Finally I had to add the extreme values. And here I had 3 options, one was again annotation elements, second was rendering each item in the line series (this proved to be a slow and tedious approach) and that’s why I choose the third approach that was to add a plot series and render each item on it. Since we only had to render 3 items at a time rendering the items was very fast.

In the end I had the sparklines that you can see on the figure. But of course that I faced a lot of challenges, specially those related to data binding. Tip: If you are to use data binding using the MXML <binding> tag proves to be much more efficient that using the ActionScript binding functions.

Sadly I’m not allowed to release any source code (they are being used in a commercial application), but if you liked my implementation or have any tips to improve them feel free to comments this post.

Note: If you want to see a small video from the final application it is available here.

Advertisements

8 Responses to “Sparklines in Flex”


  1. 1 Ravi Kumar August 23, 2007 at 5:56 am

    For sparklines in Flash, you may also see http://www.fusioncharts.com/gadgets/Gallery.asp#spark

  2. 2 Toratheus August 31, 2007 at 4:00 pm

    I would love to get the source for this… Ping me if you want to talk

  3. 3 Toratheus September 5, 2007 at 7:39 pm

    No response? Is it possible to pay you to duplicate the work off hours 🙂

  4. 4 Grate June 19, 2008 at 1:29 pm

    Somehow i missed the point. Probably lost in translation 🙂 Anyway … nice blog to visit.

    cheers, Grate!

  5. 5 Lucas Pereira November 14, 2008 at 12:01 am

    Just got a reference from http://sherlockinformatics.com/wordpress/flex-code-examples/flex-sparklines to my post… 🙂

    Well, woww… those are really great sparklines! I must say that I also used the same approach to the threshold… Also, I used plot series for the min, max and current values (widh customized item renderers)…

  6. 6 jason April 15, 2009 at 8:27 pm

    Lucas, I know you mentioned you can’t share the code, but can you point me in the right direction on how you placed the green and red dots on the linechart? If possible can you shoot me an email?

    TIA, J

  7. 7 Lucas Pereira April 16, 2009 at 8:48 am

    Hey. A good solution is to mix PlotSeries, LineSeries and AreaSeries

    You can do it like this:
    – LineChart
    – AreaSeries for the average bar
    – LineSeries for the sparkline
    – PlotSeries for the max value
    – PlotSeries for the min value

    The next step it to add an item renderer to the min and max series. This item renderer should be used to add the labels.

    Maybe we can use just one PlotSeries for both min and max values.

    Another solution is renderer each of the items of the LineSeries, but since sparklines usually represent a very large number of values, this process could be slow. What will happen is that for each item you would have to check to see if the value is equal to the max or min values and then render accordingly… I’ve tried this myself and didn’t prove to be the fasted of the approaches!

    The other way to do this is using the annotation elements… Here is probably the best example of them all!!


  1. 1 Flex Sparkline – Odds On Flex Trackback on February 8, 2010 at 3:59 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s





%d bloggers like this: