Flex: invert LinearAxis values
I have a line chart that updates every so and so on, similar to the one you see in the Windows Task Manager. The chart goes from right to left, with the latest data on the right and goes to the left. How would I invert the x-axis values so that the smallest value is on the right and the highest on the left? This is LinearAxis.
I tried to make it CategoryAxis and put the numbers manually, but that doesn't work as it should (labels don't match ticks).
Or is there a way for the labels in the CategoryAxis element to match the ticks?
a source to share
So I looked it over and I also don't see an easy way to flip the axis. However, I have a solution that will work perfectly and relatively elegantly, giving the oversight of the property to do this for you.
So, let's look at this normal line chart from left to right (you just need to copy and paste it into the project under test).
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var timeValue:ArrayCollection = new ArrayCollection( [
{ Time: 0, Value: 18 },
{ Time: 1, Value: 20 },
{ Time: 2, Value: 30 },
{ Time: 3, Value: 35 },
{ Time: 4, Value: 35 },
{ Time: 5, Value: 32 },
{ Time: 6, Value: 40 },
{ Time: 7, Value: 62 },
{ Time: 8, Value: 80 },
{ Time: 9, Value: 75 },
{ Time: 10, Value: 76 } ]);
]]>
</mx:Script>
<!-- Define custom colors for use as fills. -->
<mx:SolidColor id="sc1" color="yellow" alpha=".8"/>
<!-- Define custom Strokes for the columns. -->
<mx:Stroke id="s1" color="yellow" weight="2"/>
<mx:Panel title="ColumnChart and BarChart Controls Example"
height="100%" width="100%" layout="horizontal">
<mx:LineChart id="column"
height="100%"
width="100%"
paddingLeft="5"
paddingRight="5"
showDataTips="true"
dataProvider="{timeValue}" >
<mx:horizontalAxis>
<mx:LinearAxis maximum="10" minimum="0"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis maximum="100" minimum="0" />
</mx:verticalAxis>
<mx:series>
<mx:LineSeries
xField="Time"
yField="Value"
displayName="TimeValue"
fill="{sc1}"
stroke="{s1}"
/>
</mx:series>
</mx:LineChart>
</mx:Panel>
</mx:Application>
To change this to a right-to-left chart, I invert the time values to make them negative, and then draw them along an axis using a negative minimum and zero as a maximum. Then I also run a function on the labels to make them positive again so they match the original data source.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.charts.chartClasses.IAxisRenderer;
import mx.collections.ArrayCollection;
[Bindable]
private var timeValue:ArrayCollection = new ArrayCollection( [
{ Time: 0, Value: 18 },
{ Time: 1, Value: 20 },
{ Time: 2, Value: 30 },
{ Time: 3, Value: 35 },
{ Time: 4, Value: 35 },
{ Time: 5, Value: 32 },
{ Time: 6, Value: 40 },
{ Time: 7, Value: 62 },
{ Time: 8, Value: 80 },
{ Time: 9, Value: 75 },
{ Time: 10, Value: 76 } ]);
private function verticalAxisParseFunction(value : Number) : Number
{
return value * -1;
}
private function horizontalAxisRenderedLabelFunction(axisRenderer:IAxisRenderer, label:String):String
{
var labelAsNumber : Number = Number(label);
if (isNaN(labelAsNumber))
{
return label;
}
return (labelAsNumber * -1).toString();
}
]]>
</mx:Script>
<!-- Define custom colors for use as fills. -->
<mx:SolidColor id="sc1" color="yellow" alpha=".8"/>
<!-- Define custom Strokes for the columns. -->
<mx:Stroke id="s1" color="yellow" weight="2"/>
<mx:Panel title="ColumnChart and BarChart Controls Example"
height="100%" width="100%" layout="horizontal">
<mx:LineChart id="column"
height="100%"
width="100%"
paddingLeft="5"
paddingRight="5"
showDataTips="true"
dataProvider="{timeValue}" >
<mx:horizontalAxis>
<mx:LinearAxis id="horizontalAxis" maximum="0" minimum="-10" parseFunction="{verticalAxisParseFunction}"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis id="verticalAxis" maximum="100" minimum="0" />
</mx:verticalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer
axis="{horizontalAxis}"
labelFunction="{horizontalAxisRenderedLabelFunction}" />
</mx:horizontalAxisRenderers>
<mx:verticalAxisRenderers>
<mx:AxisRenderer
axis="{verticalAxis}"
placement="right" />
</mx:verticalAxisRenderers>
<mx:series>
<mx:LineSeries
xField="Time"
yField="Value"
displayName="TimeValue"
fill="{sc1}"
stroke="{s1}"
/>
</mx:series>
</mx:LineChart>
</mx:Panel>
</mx:Application>
a source to share