Creating a custom label function on a Flex LineChart control’s category axis

by Peter deHaan on November 16, 2007

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.

View MXML

<?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.

Tagged as: labelFunction

{ 3 comments… read them below or add one }

1 GT September 8, 2008 at 8:08 am: 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

Reply
2 Anton April 28, 2009 at 12:30 am: Hi, thanks for that great example.

I was looking at another labelfunction example that you posted (for a pie chart) and I see that this label function has different parameters.

Where can I find documentation on the label functions for the different flex charts? Or how did you figure out what parameters are required?

Thanks

Reply
3 Peter deHaan April 28, 2009 at 1:45 pm: Anton,

You can find the latest Flex 3.x documentation at http://livedocs.adobe.com/flex/3/langref/ and http://livedocs.adobe.com/flex/3/html/

Peter

Reply