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

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.

7 thoughts on “Setting specific minimum and maximum ranges for a Flex LineChart control LinearAxis

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

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

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

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

Comments are closed.