Home >
Occasionally you might find the need to compare completely unrelated data in your applications. This may sound a bit odd, but it does happen, especially in cases where you may want to observe and compare trends within your data sets. This could include completely different data sets, using different value ranges on both axes, with variable numbers of data points. Hence: comparing apples to oranges.
At first thought, you might think that you have to compare data in separate charts placed side-by-side for visual comparison. However, with Flex it is actually not difficult to to create multi-scale visualizations on the same component. In this post, we will examine the application of Flex charting components to view multiple data sets with multiple scales, and multiple collection sizes.
First, let's take a look at an example chart that shows 3 data series. The series are apples (red), oranges (orange), and bananas (yellow). Each is renderered on their own vertical and horizontal axes, and each has a different number of data points. However, they are layered over the same visible chart area. In this case, you can easily compare the trends of of the data sets.
Now, this isn't necessarily a technique for every day... In most cases you actually don't want to compare unrelated data so that you don't infer invalid correlations, but there are those rare occasions that you may actually want to.
Below is the code that makes this all work. In a single chart, there are multiple series defined. Each series has it's own data provider and axis renderers.
ApplesToOranges.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
backgroundColor="#000000" viewSourceURL="srcview/index.html">
<mx:LineChart id="chart" top="0" left="0" right="0" bottom="0" showDataTips="true">
<mx:series>
<mx:LineSeries xField="@week" yField="@quantity" dataProvider="{ xmlData..apple }">
<mx:verticalAxis>
<mx:LinearAxis id="appleAxis" autoAdjust="true" baseAtZero="false" />
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:LinearAxis autoAdjust="true" baseAtZero="false" />
</mx:horizontalAxis>
<mx:lineStroke>
<s:SolidColorStroke color="#FF0000" />
</mx:lineStroke>
</mx:LineSeries>
<mx:LineSeries xField="@seeds" yField="@yield" dataProvider="{ xmlData..orange }">
<mx:verticalAxis>
<mx:LinearAxis id="orangeAxis" autoAdjust="true" baseAtZero="false" />
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:LinearAxis autoAdjust="true" baseAtZero="false" />
</mx:horizontalAxis>
<mx:lineStroke>
<s:SolidColorStroke color="#FFA500" />
</mx:lineStroke>
</mx:LineSeries>
<mx:LineSeries xField="@year" yField="@growthRate" dataProvider="{ xmlData..banana }">
<mx:verticalAxis>
<mx:LinearAxis id="bananaAxis" autoAdjust="true" baseAtZero="false" />
</mx:verticalAxis>
<mx:horizontalAxis>
<mx:LinearAxis autoAdjust="true" baseAtZero="false" />
</mx:horizontalAxis>
<mx:lineStroke>
<s:SolidColorStroke color="#FFFF00" />
</mx:lineStroke>
</mx:LineSeries>
</mx:series>
<mx:verticalAxisRenderers>
<mx:AxisRenderer
showLine="false"
axis="{ appleAxis }"
color="#FF0000"/>
<mx:AxisRenderer
showLine="false"
axis="{ orangeAxis }"
color="#FFA500"/>
<mx:AxisRenderer
showLine="false"
axis="{ bananaAxis }"
color="#FFFF00" />
</mx:verticalAxisRenderers>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer
showLine="false"
axis="{ appleAxis }"
color="#888888"/>
</mx:horizontalAxisRenderers>
</mx:LineChart>
<fx:Declarations>
<fx:XML id="xmlData">
<data>
<apple week="1" quantity="1" />
<apple week="2" quantity="1" />
<apple week="3" quantity="2" />
<apple week="4" quantity="2" />
<apple week="5" quantity="3" />
<apple week="6" quantity="3" />
<apple week="7" quantity="4" />
<apple week="8" quantity="5" />
<apple week="9" quantity="6" />
<apple week="10" quantity="7" />
<orange seeds="1" yield="2" />
<orange seeds="2" yield="4" />
<orange seeds="3" yield="6" />
<orange seeds="4" yield="8" />
<orange seeds="5" yield="6" />
<orange seeds="6" yield="-4" />
<orange seeds="7" yield="2" />
<orange seeds="8" yield="1" />
<banana year="1" growthRate="-11" />
<banana year="2" growthRate="-12" />
<banana year="3" growthRate="9" />
<banana year="4" growthRate="4" />
<banana year="5" growthRate="10" />
</data>
</fx:XML>
</fx:Declarations>
</s:Application>
You can view this example in a new window at:
http://tricedesigns.com/portfolio/applesoranges/
You can download the full code for this example at:
http://tricedesigns.com/portfolio/applesoranges/srcview/index.html
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
^ scam advertisement and scum, please don't act stupid anymore, it 2010 and the web isn't new.
Worth mentioning against this post that Adobe recently opensourced their charting components. Flex professional license no-longer required...
http://opensource.adobe.com/wiki/display/flexsdk/flexsdk_announcements
http://iamdeepa.com/blog/?p=53
Yes I am certainly guilty of mobile data comparison and looking at oranges and apples as such.