The following example shows how you can add horizontal or vertical (or both) grid lines to a LineChart contol in Flex by setting the direction style in the GridLines tags, as seen in the following snippet:

<mx:LineChart dataProvider="{dp}">

    <mx:backgroundElements>
        <mx:GridLines direction="vertical" />
    </mx:backgroundElements>

</mx:LineChart>

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/11/15/displaying-grid-lines-in-a-flex-linechart-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <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="GridLines direction:">
                <mx:ToggleButtonBar id="toggleButtonBar" selectedIndex="0">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:String>horizontal</mx:String>
                            <mx:String>vertical</mx:String>
                            <mx:String>both</mx:String>
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ToggleButtonBar>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:LineChart id="lineChart"
            showDataTips="true"
            dataProvider="{dp}"
            width="100%"
            height="100%">

        <mx:backgroundElements>
            <mx:GridLines direction="{toggleButtonBar.dataProvider.getItemAt(toggleButtonBar.selectedIndex)}" />
        </mx:backgroundElements>

        <!-- vertical axis -->
        <mx:verticalAxis>
            <mx:LinearAxis baseAtZero="false" title="Price" />
        </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" form="curve" 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.

16 Responses to Displaying grid lines in a Flex LineChart control

  1. Dmitry says:

    Is it possible to force grid lines to use different data provider (rather that one from the chart)?

  2. hieulam says:

    I want to decorate my chart with a horizontal area that show the mean and standard deviation of the value , how can I do that. It means draw a horizontal area with specific color from x value to y value (vertical axis) in the background of the chart.
    Thank

  3. vivek says:

    Even i am looking for the something similar, but not able to :(, let me know if you found a solution to the problem

  4. Pierre says:

    Hello,

    I’m looking to draw Normal Distribution with FLEX3. Have you an idea?

    Thanks

    Best Regards

  5. Pierre says:

    Hello Peter,

    Looking on the web i found the draw what i’m looking for :
    http://www.xcelsiusjournal.com/index.php?option=com_content&task=view&id=83&Itemid=1

    Is it possible to do that in FLEX3 and how (sorry for the request i’m a beginner)?

    Best regards

  6. peterd says:

    Pierre,

    Sorry, I don’t know a lot about charting.
    You could check out the ILOG Elixir charts and see if they have what you need: http://www.ilog.com/products/ilogelixir/

    Or, you can try asking on the FlexCoders mailing list: http://tech.groups.yahoo.com/group/flexcoders/

    Peter

  7. Pierre says:

    Thanks

  8. Pierre says:

    Hello Peterd,

    I’m looking to do the same effect in a chart to separate period like the example below:
    http://www.20minutes.fr/article/263708/Monde-Le-petrole-en-chute-libre.php

    Have you some ideas to realize this kind of effect under the line of evolution :
    1) yellow – orange – yellow – Orange -…. (actually this point is the must important for me)
    2) to put on the graph a draw.
    3) identification of several points (in this example by red points)

    Best Regards

  9. Simeon Lukov says:

    Very good post. I was looking for a property like baseAtZero that could hide all the white space from zero value to the min value…

    Thank you Peter !

  10. Niladri says:

    Hi,
    Actually I’m looking for a code that will show toggle on my line chart.Means say I have 12 month data in line chart.Then it will show circle on those 12 points on line chart.

  11. chucuan says:

    is it posible to display both lines at the same time and dotted style?

  12. chucuan says:

    omg sry for dobule post but i found the soluttion as allways 1 min after asking….

  13. aravindakumar says:

    hi,
    Any chance to change background grid line style like dotted line for vertical and horizontal lines?

  14. Haemp says:

    If you’re using a later version of flex and is confused about the “direction” property, its now called “gridDirection”.

  15. Gopi says:

    It is very good post! Thank a lot – I have a question though.

    How do I high light only one vertical gird line? For e.g, I would like to show a different color for grid line for the date of 08/06/2007?

    Can you please help me?

    Thanks,
    Gopi

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