June 19th, 2008 by Kyle
Tags: axis dataFunction, charting, Flex, labelfunction, origin
Posted in: Flex
Ya…you heard me. Flipping Flex Chart Axis! And I mean it too.
Wouldn’t it be nice if you could easily swap x and y axis? And change the “corner” where the origin is. This functionality isn’t built in to the charts. You can change the side (left or right) where the y-axis is and the position of the x-axis (top or bottom), but that doesn’t change where the origin is. It merely changes where the axis labels appear. Well, this sample shows that through the combination of sorting, dataFunctions and labelFunctions, you can flip the chart axis and change where the origin appears in your chart.
Download a zipfile containing the source to this sample.
Browse the source of this example.
Or continue into the blog entry to see the source:
Here is the app code:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.charts.HitData;
import mx.charts.chartClasses.IAxis;
import mx.charts.chartClasses.Series;
import mx.collections.Sort;
import mx.collections.SortField;
import mx.collections.ArrayCollection;
[Bindable]
public var ac:ArrayCollection = new ArrayCollection([
{X: "A", Y: 2000},
{X: "B", Y: 1000},
{X: "C", Y: 1500}
]);
[Bindable]
private var vax_location:String="left";
[Bindable]
private var hax_location:String="bottom";
private function sortXY(Xdescending:Boolean, Ydescending:Boolean):void{
var dataSortFieldX:SortField = new SortField();
dataSortFieldX.name = "X";
dataSortFieldX.descending=Xdescending;
var dataSortFieldY:SortField = new SortField();
dataSortFieldY.name = "Y";
dataSortFieldY.descending=Ydescending;
dataSortFieldY.numeric=true;
/* Create the Sort object and add the SortField object created earlier to the array of fields to sort on. */
var dataSort:Sort = new Sort();
dataSort.fields = [dataSortFieldX, dataSortFieldY];
/* Set the ArrayCollection object’s sort property to our custom sort, and refresh the ArrayCollection. */
ac.sort = dataSort;
ac.refresh();
}
private function dataFunc(series:Series, item:Object, fieldName:String):Object {
if(fieldName == "yValue"){
if(hax_location==‘top’){
return -item.Y;
}else {
return item.Y;
}
}
else if(fieldName == "xValue"){
return item.X;
}
else return null;
}
private function labelFuncY(labelValue:Object, previousValue:Object, axis:IAxis):String{
if(hax_location==‘top’){
return (-Number(labelValue)).toString();
}else {
return Number(labelValue).toString();
}
}
private function dataTipFunc(item:HitData):String {
return "X: " + item.item.X + " , Y: " + item.item.Y
}
]]></mx:Script>
<mx:Panel title="Line Chart">
<mx:LineChart dataProvider="{ac}" showDataTips="true" dataTipFunction="dataTipFunc">
<mx:horizontalAxis>
<mx:CategoryAxis id="h1" dataProvider="{ac}" categoryField="X" title="X" />
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis id="v1" title="Y" labelFunction="labelFuncY"/>
</mx:verticalAxis>
<mx:series>
<mx:LineSeries yField="Y" xField="X" displayName="X vs Y" dataFunction="dataFunc" />
</mx:series>
<mx:verticalAxisRenderers>
<mx:AxisRenderer id="vax" axis="{v1}" placement="{vax_location}"/>
</mx:verticalAxisRenderers>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer id="hax" axis="{h1}" placement="{hax_location}"/>
</mx:horizontalAxisRenderers>
</mx:LineChart>
<mx:ControlBar>
<mx:Button label="X-bottom, Y-left" click="hax_location=’bottom’;vax_location=’left’;sortXY(false,false)"/>
<mx:Button label="X-top, Y-left" click="hax_location=’top’;vax_location=’left’;sortXY(false,true)"/>
<mx:Button label="X-top, Y-right" click="hax_location=’top’;vax_location=’right’;sortXY(true,true)"/>
<mx:Button label="X-bottom, Y-right" click="hax_location=’bottom’;vax_location=’right’;sortXY(true,true)"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
Tweet
2 Comments »

September 10th, 2009 at 8:55 am
Hi! I was surfing and found your blog post… nice! I love your blog.
Cheers! Sandra. R.
February 20th, 2010 at 11:23 pm
thx for your code , it’s very usefull!!