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 with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

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

  1. GT says:

    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

  2. Anton says:

    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

  3. Ali says:

    you have just saved my life!
    thank you soooooo much!
    cheers!

  4. Gen says:

    Hi,

    I have a question that is related to axis labels, I am looking at suppressing the labels being shown on the category axis, eg I want to sow only every x label, eg every 2nd, or 3rd etc, whne the labels get so many. I tried overriding the reduceLabels function of the catagoryAxis class, and just inserting the labels if they are in the position desired, but when I do this I seem to loose the tick marks that comes with the labels and I have no idea how to get them back.

    If I trick it and still add all the labels, but for the position that is not desired I replace the label with a blank value, I get the tick marks, but the labels are so small as it is still trying to fit everything in the available space of the line axis.

    Just wondering if you gus can provide some tips for me in achieving what I want to do.

    Cheers,
    Gen

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree