Being big Tuft fans we have been anxious to use sparklines in our Flex projects. After some research we found precedent in Lucas Pereira’s blog and some other miscellaneous messaging regarding sparklines in flex but overall I was pretty surprised at the lack of examples and discussion. This information void left me with the thought that maybe the Flex community is not as active in data visualization (maybe there is content with the Flex Charting components) as I had previously imagined.

Regardless of the cause for the lack of Flex sparkline examples, we needed them so lets get into what we did:

Sparkline is a name proposed by Edward Tufte for “small, high resolution graphics embedded in a context of words, numbers, images”^[1].

Here is a selection of our sparkline implementations:

The biggest obstacle was shrinking the outputs and cleaning up the noisy interface objects such as grid lines and axis labels. Another key need was a threshold line. We found the solution for that at Adobe’s Cookbook site. Essentially you create an area series having a minField attribute value equal to your threshold value.

Here is the important code:

<mx:Style>
    .myAxisStyle {             //Getting rid of extraneous visuals
        tickLength: 0;
        tickPlacement: none;
        minorTickPlacement: none;
    }
</mx:Style>

	<mx:backgroundElements>
		<mx:GridLines visible="false"/> //Getting rid of extraneous visuals
	</mx:backgroundElements>

	<mx:horizontalAxisRenderer>
	    <mx:AxisRenderer showLabels="false" showLine="false" styleName="myAxisStyle"/>
	</mx:horizontalAxisRenderer>

	<mx:verticalAxisRenderer>
		<mx:AxisRenderer showLine="false" showLabels="false" styleName="myAxisStyle"/>
	</mx:verticalAxisRenderer>

	<mx:verticalAxis>
		<mx:LinearAxis  minimum="{_graphMin}" maximum="{_graphMax}"/>
	</mx:verticalAxis>

	<mx:series>
		<mx:AreaSeries  yField="normMax" minField="normMin">
				<mx:areaFill>
                                    <mx:SolidColor
                                     color="{_thresholdColor}"
                                     alpha=".6"
                                      />
                               </mx:areaFill>
			</mx:AreaSeries> //This is the series for the threshold line
			<mx:LineSeries interpolateValues="true" yField="value">
			<mx:stroke>
		        <mx:Stroke color="{_strokeColor}" weight="0.5" alpha="1"/>
		    </mx:stroke>
			<mx:lineStroke>
			        <mx:Stroke color="{_strokeColor}" weight="0.5" alpha=".8"/>
			</mx:lineStroke>

			</mx:LineSeries>

		</mx:series>

</mx:LineChart>

The entire code for use as a component:

<mx:LineChart creationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml"
	dataProvider="{list}" x="111" y="10"
	  seriesFilters="[]"   width="{_width}" height="{_height}">
		<mx:Script>
		<![CDATA[
			import mx.events.CollectionEvent;
			import mx.collections.ArrayCollection;
			[Bindable]
			public var _width:int=150;
			[Bindable]
			public var _height:int=29;
			[Bindable]
			public var _strokeColor:Number=0x0000FF;
			[Bindable]
			public var _thresholdColor:Number=0x000000;
			[Bindable]
			public var _dataCollection:ArrayCollection=null;

			[Bindable]
			private var list:ArrayCollection=new ArrayCollection();

			[Bindable]
			public var _normalMax:Number=0;
			[Bindable]
			public var _normalMin:Number=0;

			[Bindable]
			public var _graphMax:Number=1000;
			[Bindable]
			public var _graphMin:Number=-10;

			[Bindable]
			public var _yField:String=null;

			public function refresh():void{
				graph(null);
			}

			public function init():void{
				graph(null);

			}

			public function graph(obj:Object):void{
				var val:Number=0;
				if (_dataCollection==null){
																				trace("using fake data for sparkline");
					testData();
				}else{
					if (_yField==null ){
						//need this throw an exception
						throw new Error("Need to define y fields name for sparkline to get data from list collection");
					}else{
						var cnt:int=0;
																				//	trace("Data points in sparkline:"+_dataCollection.length);
						for each (var obj:Object in _dataCollection){

							var point:Object=new Object();
							point.value=obj[_yField];
							point.label=cnt;
							point.normMax=_normalMax;
							point.normMin=_normalMin;
							list.addItem(point);
							cnt++;
						}
					}//else
				}
			}

			public function testData():void{
				for (var i:int=0;i<89;i++){
					var x:Number=Math.round(Math.random()*1000);
					var point:Object=new Object();
					point.value=x;
					point.label=i;
					point.normMax=_normalMax;
					point.normMin=_normalMin;
					list.addItem(point);
				}
			}
		]]>
	</mx:Script>
	<mx:Style>
    .myAxisStyle {
        tickLength: 0;
        tickPlacement: none;
        minorTickPlacement: none;
    }
</mx:Style>

	<mx:backgroundElements>
		<mx:GridLines visible="false"/>
	</mx:backgroundElements>

	<mx:horizontalAxisRenderer>
	    <mx:AxisRenderer showLabels="false" showLine="false" styleName="myAxisStyle"/>
	</mx:horizontalAxisRenderer>

	<mx:verticalAxisRenderer>
		<mx:AxisRenderer showLine="false" showLabels="false" styleName="myAxisStyle"/>
	</mx:verticalAxisRenderer>

	<mx:verticalAxis>
		<mx:LinearAxis  minimum="{_graphMin}" maximum="{_graphMax}"/>
	</mx:verticalAxis>

	<mx:series>
			<mx:AreaSeries  yField="normMax" minField="normMin">
				<mx:areaFill>
                    <mx:SolidColor
                        color="{_thresholdColor}"
                        alpha=".6"
                    />
                </mx:areaFill>
			</mx:AreaSeries>
			<mx:LineSeries interpolateValues="true" yField="value">
			<mx:stroke>
		        <mx:Stroke color="{_strokeColor}" weight="0.5" alpha="1"/>
		    </mx:stroke>
			<mx:lineStroke>
			        <mx:Stroke color="{_strokeColor}" weight="0.5" alpha=".8"/>
			</mx:lineStroke>

			</mx:LineSeries>

		</mx:series>

</mx:LineChart>