Flex Sparkline

February 8th, 2010 by Graham Odds

Sparklines are described by their inventor, Edward Tufte, as “data-intense, design-simple, word-sized graphics”. They are an ideal tool for displaying trends for single entries within large data sets, for example, stock prices. As well as the standard miniature line series, Tufte’s original specification introduces a ternary sparkline, a.k.a. win-loss sparkline, where small columns are used to indicate “win” or “loss” and no column to indicate “draw”.

This article is intended to present, and distribute, Flex 3 implementations of sparklines, win-loss sparklines and another common variation, column sparklines. The code and documentation can be obtained from here. The following is an example showing some of the variations available:

Sparkline Examples

The Sparkline, TernarySparkline and ColumnSparkline classes are all implemented using core Flex functionality, i.e. there are no dependencies. They all implement IListItemRenderer and IDropInListItemRenderer interfaces, so can readily be used as standalone components or as item renderers in a DataGrid or other list control. Based on the original specification, the Sparkline allows the user to optionally show a normal range, x-axis min and max points and y-axis min and max points. All of these features and the line itself can be styled. Similarly, the TernarySparkline and ColumnSparkline allow the user to specify the “zero” value, and style positive, negative and zero styles independently. A final feature of the sparklines is that they will update automatically based on dataProvider updates, as shown in the following example, which plots a constantly-updating, randomly generated series of numbers:

Updating sparkline example.

It is worth noting that there are a number of alternative Flex implementations available. However, they all have further dependencies, potentially making them more heavyweight. For example, Tom Gonzalez and Andrew Trice both present implementations using the Degrafa graphics framework. Because of their use of Degrafa, these implementations inherently allow users to easily use any number of extravagant styling. Although potentially initially appealing, this goes against the good data visualisation practices suggested by experts such as Stephen Few and Tufte himself; “eloquence through simplicity”[ref]. Lucas Pereira and Sherlock Informatics both present implementations using the Flex Data Visualization library. The charts contained in the library are wonderfully feature-rich and flexible. However, this means that they are also rather heavyweight components and, therefore, using a large number of these as item renderers in an application is likely to use a lot of memory and/or make the application non-performant. A final potential alternative are the micro-charts available in the BirdEye visualisation library. Much like the examples using the Flex Data Visualization library, these can be perfect in situations where small numbers of instances are present, but again they introduce features that cause them to be more heavyweight than necessary.

The components are being made available under the GNU General Public License and can be obtained from here. The zip also includes some documentation and an swc of components, using the namespace http://www.scottlogic.com/sparkline.

Tags: , ,

This entry was posted on Monday, February 8th, 2010 at 3:58 pm and is filed under Flex, Visualisation. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “Flex Sparkline”

  1. Changing Flex itemRenderer at runtime | Blogagic says:
    May 30, 2010 at 2:21 pm

    [...] For my examples, I used a Flex Sparkline implementation provided by Graham Odds. [...]

  2. Jorge Flores says:
    August 13, 2010 at 6:44 pm

    Hola, estaba checando tu sparkline, me parece muy bueno tu ejemplo, solo una preguntame puedes pasar el codigo fuente del sparkline dinamyco ??, te lo agradeceria eternamente, pues tengo que hacer una aplicacion Gracias.

  3. Graham Odds says:
    August 16, 2010 at 7:55 am

    Hi Jorge,
    The sparkline will update automatically when its dataprovider changes. Here is the code for artificial example shown in the article (with styling stripped out for brevity):

    <mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:spark="com.scottlogic.sparkline.*"
    creationComplete="initialise()"
>
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
 
            [Bindable]
            private var dp:ArrayCollection = new ArrayCollection();
 
            private var timer:Timer;
 
            private function initialise():void
            {
                timer = new Timer(1000);
                timer.addEventListener(TimerEvent.TIMER, onTimerTick)
                timer.start();
            }
 
            private function onTimerTick(event:TimerEvent):void
            {
                dp.addItem(Math.random());
            }
        ]]>
    </mx:Script>
    <spark:Sparkline dataProvider="{dp}" />
</mx:Application>

    Hope that helps.

    Regards,
    Graham

Leave a Reply