Creating Line Charts in Flex 3

Related Posts:

• Inverting a ChartSeries

Making a Line Chart in 5 steps

There are many ways to make your charts, what follows is a recipe that allows you to tweak common aspects of the chart. Steps 3 through 5 are not necessarily required.

1. Create the Application and LineChart tags

Start by creating a Flex application w/the Application tag.

Then use a <Script> block to write some ActionScript. Declare an ArrayCollection named myArrayCollection. In a real application this data could be retreived from the web server as XML.

Declare a LineChart named myChart in MXML. Then bind the myArrayCollection to the LineChart's dataProvider property, using the curly brace notation:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="vertical">

 <mx:Script>
     <![CDATA[

     import mx.collections.ArrayCollection;

     [Bindable] private var myArrayCollection : ArrayCollection =
         new ArrayCollection(
         [ { sales: 101000, month: new Date( '01/01/2008' ) },
         { sales: 350000, month: new Date( '02/01/2008' ) },
         { sales: 475000, month: new Date( '03/01/2008' ) },
         { sales: 425000, month: new Date( '04/01/2008' ) }
         ] );

     ]]>
 </mx:Script>

 <mx:LineChart id="myChart"
     dataProvider="{myArrayCollection}"
     width="400" height="400"
     showDataTips="true"
     >

 </mx:LineChart>
</mx:Application>

2. Configure the series property of the LineChart object

The series property defines the data we're plotting. For a LineChart, you need to define this as a LineSeries object. We're going to use the LineSeries to specify where the X and Y values are in the chart's dataProvider. So we specify field names from our canned data in the xField and yField properties.

If you want to plot multiple data series, tack on a LineSeries object for each series.

We want to override the default colors Flex uses to render the chart lines. To do this we set the lineStroke property to a Stroke object, this specifies the color and size of the painting "stroke".

Add the following, as a child tag to the LineChart element:

<mx:series>
 <mx:LineSeries displayName="Sales by Month"
     yField="sales" xField="month" >

     <mx:lineStroke>
         <mx:Stroke
             color="0x11538C"
             weight="3"
             alpha="1"
             />
     </mx:lineStroke>
        
 </mx:LineSeries>
</mx:series>

3. Configure the horizontalAxis and verticalAxis properties of the LineChart object

This is not mandatory, but I recommend it for better control over how your axis labels are displayed. You can specify four different types of axes:

• LinearAxis - for numeric values
• LogarithmicAxis - for numeric values
• DateTimeAxis - for date values
• CategoryAxis - the default, for your own categories

You can set various properties on these axis objects, we are using a DateTimeAxis and a LinearAxis in this chart. Add the following, as a child tag to the LineChart element:

<mx:horizontalAxis>
 <mx:DateTimeAxis id="hAxis"
     dataUnits="months"
     alignLabelsToUnits="true"
     displayLocalTime="true"/>
</mx:horizontalAxis>

<mx:verticalAxis>
 <mx:LinearAxis id="vAxis" />
</mx:verticalAxis>

4. Configure the horizontalAxisRenderer and verticalAxisRenderer properties of the LineChart object

Axis renderers control how each axis is displayed, and are optional in this approach. Note how we use data binding to specify which axis each renderer should apply to. And again, add the following, as a child tag to the LineChart element:

<mx:horizontalAxisRenderers>
 <mx:AxisRenderer axis="{hAxis}"
     showLine="true"
     tickPlacement="outside"
     />
</mx:horizontalAxisRenderers>

<mx:verticalAxisRenderers>
 <mx:AxisRenderer axis="{vAxis}"
     showLine="false"
     tickPlacement="none"
 />
</mx:verticalAxisRenderers>

5. Add a Legend to your chart

You can optionally add a legend. You do this with data binding, by setting the dataProvider property of a Legned object. Add the Legend object as a child to the Application (not the LineChart):

<mx:Legend dataProvider="{myChart}" />

Keep on tweakin'

Check out the Flex 3 API for details on all of the classes mentioned here. Here are some more properties of the LineChart object that you can tweak:

• seriesFilter - use this to modify the filters for each line, you can set this to a blank array to remove drop shadows
• backgroundElements - use this to configure grid lines
• fills - use this property to specify the background color of the chart

If you've been following along, you should have produced the app below. Right click to view the final source.