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 implementations of sparklines, win-loss sparklines and another common variation, column sparklines. The Flex 3 version of the code and documentation can be obtained from here, while the Flex 4 version can be found here. The following is an example showing some of the variations available:

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:

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 presents an implementation 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 (Flex 3) or here (Flex 4). The zips also include some documentation and a pre-compiled swc of components, using the namespace http://www.scottlogic.com/sparkline.

UPDATE 19/04/2011: I have created an updated version of the library that is Flex 4 compatible. This is available here and a short article detailing the migratory changes can be found here.

UPDATE 13/09/2013: I have added the codebase to GitHub.