The following example shows how you can set a specific minimum and maximum LinearAxis range for a LineChart control in Flex.

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/11/19/setting-specific-minimum-and-maximum-ranges-for-a-flex-linechart-control-linearaxis/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        preinitialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.charts.chartClasses.IAxis;
            import mx.formatters.CurrencyFormatter;

            private var currFormatter:CurrencyFormatter;

            private function init():void {
                currFormatter = new CurrencyFormatter();
                currFormatter.precision = 2;
            }

            private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
                return currFormatter.format(item);
            }

            private function lineChart_creationComplete():void {
                var linearAxisMinimum:int = Math.floor(linearAxis.computedMinimum);
                var linearAxisMaximum:int = Math.ceil(linearAxis.computedMaximum);
                linearAxis.minimum = linearAxisMinimum;
                linearAxis.maximum = linearAxisMaximum;
            }
        ]]>
    </mx:Script>

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <quote date="8/27/2007" open="40.38" close="40.81" />
                <quote date="8/24/2007" open="40.5" close="40.41" />
                <quote date="8/23/2007" open="40.82" close="40.6" />
                <quote date="8/22/2007" open="40.4" close="40.77" />
                <quote date="8/21/2007" open="40.41" close="40.13" />
                <quote date="8/20/2007" open="40.55" close="40.74" />
                <quote date="8/17/2007" open="40.18" close="40.32" />
                <quote date="8/16/2007" open="39.83" close="39.96" />
                <quote date="8/15/2007" open="40.22" close="40.18" />
                <quote date="8/14/2007" open="41.01" close="40.41" />
                <quote date="8/13/2007" open="41" close="40.83" />
                <quote date="8/10/2007" open="41.3" close="41.06" />
                <quote date="8/9/2007" open="39.9" close="40.75" />
                <quote date="8/8/2007" open="39.61" close="40.23" />
                <quote date="8/7/2007" open="39.08" close="39.42" />
                <quote date="8/6/2007" open="38.71" close="39.38" />
                <quote date="8/3/2007" open="39.47" close="38.75" />
                <quote date="8/2/2007" open="39.4" close="39.52" />
                <quote date="8/1/2007" open="40.29" close="39.58" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="minimum:">
                <mx:HSlider id="minSlider"
                        minimum="28"
                        maximum="38"
                        value="38"
                        liveDragging="true"
                        snapInterval="1"
                        change="linearAxis.minimum = event.value;" />
            </mx:FormItem>
            <mx:FormItem label="maximum:">
                <mx:HSlider id="maxSlider"
                        minimum="42"
                        maximum="52"
                        value="42"
                        liveDragging="true"
                        snapInterval="1"
                        change="linearAxis.maximum = event.value;" />
            </mx:FormItem>
        </mx:Form>

        <mx:Spacer width="100%" />

        <mx:Legend dataProvider="{lineChart}"
                direction="horizontal" />
    </mx:ApplicationControlBar>

    <mx:LineChart id="lineChart"
            showDataTips="true"
            dataProvider="{dp}"
            width="100%"
            height="100%"
            creationComplete="lineChart_creationComplete();">

        <mx:backgroundElements>
            <mx:GridLines id="gridLines"
                    direction="both"
                    verticalTickAligned="false">
                <mx:verticalStroke>
                    <mx:Stroke color="haloSilver"
                            weight="0"
                            alpha="1.0" />
                </mx:verticalStroke>
                <mx:horizontalStroke>
                    <!-- Set alpha to 0 so stroke isn't visible. -->
                    <mx:Stroke color="white"
                            weight="0"
                            alpha="0.0" />
                </mx:horizontalStroke>
                <mx:horizontalFill>
                    <mx:SolidColor color="haloSilver"
                            alpha="0.1" />
                </mx:horizontalFill>
            </mx:GridLines>
        </mx:backgroundElements>

        <!-- vertical axis -->
        <mx:verticalAxis>
            <mx:LinearAxis id="linearAxis"
                    baseAtZero="false"
                    title="Price (USD)"
                    minorInterval="0.10"
                    interval="0.5"
                    labelFunction="linearAxis_labelFunc" />
        </mx:verticalAxis>

        <!-- horizontal axis -->
        <mx:horizontalAxis>
            <mx:CategoryAxis id="ca"
                    categoryField="@date"
                    title="Date" />
        </mx:horizontalAxis>

        <!-- horizontal axis renderer -->
        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer axis="{ca}"
                    canDropLabels="true" />
        </mx:horizontalAxisRenderers>

        <!-- series -->
        <mx:series>
            <mx:LineSeries yField="@open"
                    displayName="Open" />
        </mx:series>
    </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.

7 Responses to Setting specific minimum and maximum ranges for a Flex LineChart control LinearAxis

  1. ellen guan says:

    hi i do not get maximum & minimum can you help me understand it more clearly?

  2. DaRk6 says:

    Hey Peter.
    I’m having a problem: I’m reading a database to fill up a linechart. It displays the Sales of a Product in the actual year, and the past year. These 2 years are showed by 2 line series. The Horizontal Axis is filled by a Month Array, that means the 12 months. But when one of the years doesn’t have data in a month, let’s say, March, the line series does not jump over the empty month, showing the 11 months one after the other, from january to november, instead of from january to february, and april to december. I’m not sure if I explained it well, my english isn’t that good, but if you help me please contact me by e-mail.
    Thanks for your time.

  3. Shameer Sslim says:

    Thanks for sharing the code.
    I am not able to access the protected properties computedMinimum and computedMaximum,..
    So this source is throwing me an error. I am not able to run it,…
    Can you please mail me the solution.

  4. peterd says:

    Shameer Sslim,

    In Flex 3, the computedMinimum and computedMaximum properties should be public.
    http://livedocs.adobe.com/flex/3/langref/mx/charts/LinearAxis.html (the two properties should both be inherited from the NumericAxis class).

    Peter

    UPDATE: Although, in Flex 2, it seems those two properties were, in fact, protected: http://livedocs.adobe.com/flex/201/langref/mx/charts/LinearAxis.html

  5. Geoff says:

    Does anyone know how to do this horizontally? I know I could filter items out of the dataprovider and let the chart take care of the rest, but that isn’t especially convenient in my situation.

  6. Herakl says:

    hi everybody. I use flex Linechart component in my simple project.Sometimes I get wrong result for labelfunction(DatetimeAxis).So that ,if difference of maximum and minimum date is more than two months component doesn’t show correct ordering.for example 8/2011 is first from 7/2011.And I dont know that why it is so .anybody know solution of problem?

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