The following example shows how you can create a custom label function on a CategoryAxis in a Flex LineChart control.
For an example of creating a custom label function for the vertical/linear axis, check out “Creating a custom label function on a Flex LineChart control’s linear axis”.
Full code after the jump.
<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/11/16/creating-a-custom-label-function-on-a-flex-linechart-controls-category-axis/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String {
var datNum:Number = Date.parse(item);
var tempDate:Date = new Date(datNum);
return dateFormatter.format(tempDate).toUpperCase();
}
]]>
</mx:Script>
<mx:DateFormatter id="dateFormatter" formatString="MMMM-DD-YYYY" />
<mx:XMLListCollection id="dp">
<mx:source>
<mx:XMLList>
<quote date="8/1/2007" open="40.29" close="39.58" />
<quote date="8/2/2007" open="39.4" close="39.52" />
<quote date="8/3/2007" open="39.47" close="38.75" />
<quote date="8/6/2007" open="38.71" close="39.38" />
<quote date="8/7/2007" open="39.08" close="39.42" />
<quote date="8/8/2007" open="39.61" close="40.23" />
<quote date="8/9/2007" open="39.9" close="40.75" />
<quote date="8/10/2007" open="41.3" close="41.06" />
<quote date="8/13/2007" open="41" close="40.83" />
<quote date="8/14/2007" open="41.01" close="40.41" />
<quote date="8/15/2007" open="40.22" close="40.18" />
<quote date="8/16/2007" open="39.83" close="39.96" />
<quote date="8/17/2007" open="40.18" close="40.32" />
<quote date="8/20/2007" open="40.55" close="40.74" />
<quote date="8/21/2007" open="40.41" close="40.13" />
<quote date="8/22/2007" open="40.4" close="40.77" />
<quote date="8/23/2007" open="40.82" close="40.6" />
<quote date="8/24/2007" open="40.5" close="40.41" />
<quote date="8/27/2007" open="40.38" close="40.81" />
</mx:XMLList>
</mx:source>
</mx:XMLListCollection>
<mx:LineChart id="lineChart"
showDataTips="true"
dataProvider="{dp}"
width="100%"
height="100%">
<!-- vertical axis -->
<mx:verticalAxis>
<mx:LinearAxis baseAtZero="false"
title="Price" />
</mx:verticalAxis>
<!-- horizontal axis -->
<mx:horizontalAxis>
<mx:CategoryAxis id="ca"
categoryField="@date"
title="Date"
labelFunction="categoryAxis_labelFunc" />
</mx:horizontalAxis>
<!-- horizontal axis renderer -->
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{ca}"
canDropLabels="true" />
</mx:horizontalAxisRenderers>
<!-- series -->
<mx:series>
<mx:LineSeries yField="@open"
form="curve"
displayName="Open" />
</mx:series>
<!-- series filters -->
<mx:seriesFilters>
<mx:Array />
</mx:seriesFilters>
</mx:LineChart>
</mx:Application>
View source is enabled in the following example.
Another example that helps me toward a goal… this time I’m trying to get an x-Axis to suppress all but the first date of a month, and then to render that date as MMM-YY.
Initially I did it in PHP before bringing the data in, by fetching all dates as MMM-YY then writing empty tags - that is, - in the XML if date[x]==date[x-1]).
Then I found that if you have a chart in a resizable box in Flex, the x-Axis auto resizing throws an error if there are null x-Values with non-null Y values. Bummer.
At present what I’ve managed to do is to render ALL dates as MMM-YY (that was pretty easy), but the ‘dropping’ function to getrid of crowding seems arbitrary. Note how in the example above, the break between label markers is not always six days (Aug-13 to Aug-7 is only 4 days)… and plus six days s an awkward outcome in any case.
If there was a way to make that fixed at a week (or two weeks, or a month) that would be teh.awesome. I’m trying to find a solution and will post the outcome here if I do - although doubtless I’ll be re-inventing a wheel that I haven’t yet found on the Google.
Cheers
GT
France