Adobe Flex 3 Help

Using line charts

The LineChart control represents data as a series of points, in Cartesian coordinates, connected by a continuous line. You can use an icon or symbol to represent each data point along the line, or show a simple line without icons.

The following example shows a simple LineChart control with three series:

A simple LineChart control with three series.

You use the LineSeries chart series with the LineChart control to define the data for the chart. The following table describes the properties of the LineSeries chart series that you commonly use to define your chart:

Property

Description
yField

Specifies the field of the data provider that determines the y-axis location of each data point. This is the height of the line at that location along the axis.
xField

Specifies the field of the data provider that determines the x-axis location of each data point. If you omit this field, Flex arranges the data points in the order of the data in the data provider.
interpolateValues

Specifies how to represent missing data. If you set the value of this property to false, the chart breaks the line at the missing value. If you specify a value of true, Flex draws a continuous line by interpolating the missing value. The default value is false.

form

Specifies the way in which the data series is shown in the chart. The following values are valid:

  • segment Draws lines as connected segments that are angled to connect at each data point in the series. This is the default.
  • step Draws lines as horizontal and vertical segments. At the first data point, draws a horizontal line, and then a vertical line to the second point. Repeats this for each data point.
  • reverseStep Draws lines as horizontal and vertical segments. At the first data point, draws a vertical line, and then a horizontal line to the second point. Repeats this for each data point.
  • vertical Draws the vertical line only from the y-coordinate of the first point to the y-coordinate of the second point at the x-coordinate of the second point. Repeats this for each data point.
  • horizontal Draws the horizontal line only from the x-coordinate of the first point to the x-coordinate of the second point at the y-coordinate of the first point. Repeats this for each data point.
  • curve Draws curves between data points.

The following example shows the available forms for a LineChart control's series:

The available forms for a LineChart control: segment, step, vertical, horizontal, reverse step, and curve.

A. segment (default) B. step C. vertical D. horizontal E. reverseStep F. curve

The following example creates a LineChart control: 

<?xml version="1.0"?>
<!-- charts/BasicLine.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
        {Month:"Feb", Profit:1000, Expenses:200, Amount:600},
        {Month:"Mar", Profit:1500, Expenses:500, Amount:300}
     ]);
  ]]></mx:Script>
  <mx:Panel title="Line Chart">
     <mx:LineChart id="myChart" 
        dataProvider="{expenses}" 
        showDataTips="true"
     >
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month"
            />
        </mx:horizontalAxis>
        <mx:series>
           <mx:LineSeries 
                yField="Profit" 
                displayName="Profit"
           />
           <mx:LineSeries 
                yField="Expenses" 
                displayName="Expenses"
           />
        </mx:series>
     </mx:LineChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>

The executing SWF file for the previous example is shown below:

Formatting lines

You can change the width and color of the lines for each series by using the <mx:lineStroke> tag. The default line is 3 pixels wide and has a shadow. The following example sets a custom color and width for the series Stroke object: 

<?xml version="1.0"?>
<!-- charts/BasicLineStroke.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
        {Month:"Feb", Profit:1000, Expenses:200, Amount:600},
        {Month:"Mar", Profit:1500, Expenses:500, Amount:300}
     ]);
  ]]></mx:Script>
  <mx:Panel title="Line Chart With Strokes">
     <mx:LineChart id="myChart" 
        dataProvider="{expenses}" 
        showDataTips="true"
     >
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month"
            />
        </mx:horizontalAxis>
        <mx:series>
           <mx:LineSeries 
            yField="Profit" 
            displayName="Profit"
           >
            <mx:lineStroke>
                <mx:Stroke 
                    color="0x0099FF" 
                    weight="20" 
                    alpha=".2"
                />
            </mx:lineStroke>                
           </mx:LineSeries>
           <mx:LineSeries 
            yField="Expenses" 
            displayName="Expenses"
           >
            <mx:lineStroke>
                <mx:Stroke 
                    color="0x0044EB" 
                    weight="20" 
                    alpha=".8"
                />
            </mx:lineStroke>                
           </mx:LineSeries>
        </mx:series>
     </mx:LineChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>

The executing SWF file for the previous example is shown below:

You can also modify lines in a LineChart with ActionScript. You define a new Stroke, and apply it to the LineSeries by setting the lineStroke style property with the setStyle() method. For example:

var s1:Stroke = new Stroke(0x0099FF,20,.2); //First 3 arguments are color, weight, and alpha.
series1.setStyle("lineStroke", s1);

For more information on using the Stroke class in charts, see Using strokes with chart controls.

The default appearance of the lines in a LineChart control is with drop shadows. You can remove these shadows by setting the chart control's seriesFilters property to an empty Array, as the following example shows:

<?xml version="1.0"?>
<!-- charts/LineChartNoShadows.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;

     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
        {Month:"Feb", Profit:1000, Expenses:200, Amount:600},
        {Month:"Mar", Profit:1500, Expenses:500, Amount:300}
     ]);
  ]]></mx:Script>

  <mx:Panel title="Line Chart with No Shadows">
     <mx:LineChart id="myChart" dataProvider="{expenses}" showDataTips="true">
        <mx:seriesFilters>
           <mx:Array/>
        </mx:seriesFilters>
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month"
           />
        </mx:horizontalAxis>
        <mx:series>
           <mx:LineSeries 
                yField="Profit" 
                displayName="Profit"
           />
           <mx:LineSeries 
                yField="Expenses" 
                displayName="Expenses"
           />
           <mx:LineSeries 
                yField="Amount" 
                displayName="Amount"
           />
        </mx:series>
     </mx:LineChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>

The executing SWF file for the previous example is shown below:

You can also set the value of the seriesFilters property programmatically, as the following example shows:

myLineChart.seriesFilters = [];

You can also specify a programmatic renderer (or skin) class for each series by setting the lineSegmentRenderer property of the LineSeries. The default renderer is the LineRenderer, but Flex also applies a shadow filter on all series. If you remove the shadow filter, as the previous example shows, but want a line with a drop shadow in your chart, you can set the lineSegmentRenderer to the ShadowLineRenderer class, as the following example shows: 

<?xml version="1.0"?>
<!-- charts/LineChartOneShadow.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;

     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
        {Month:"Feb", Profit:1000, Expenses:200, Amount:600},
        {Month:"Mar", Profit:1500, Expenses:500, Amount:300}
     ]);
  ]]></mx:Script>

  <mx:Panel title="Line Chart with One Shadow">
     <mx:LineChart id="myChart" dataProvider="{expenses}" showDataTips="true">
        <mx:seriesFilters>
           <mx:Array/>
        </mx:seriesFilters>
        <mx:horizontalAxis>
           <mx:CategoryAxis
                dataProvider="{expenses}"
                categoryField="Month"
           />
        </mx:horizontalAxis>
        <mx:series>
           <mx:LineSeries
                yField="Profit"
                displayName="Profit"
           />
           <mx:LineSeries
                yField="Expenses"
                displayName="Expenses"
           />
           <mx:LineSeries
                yField="Amount"
                displayName="Amount"
                lineSegmentRenderer=
                "mx.charts.renderers.ShadowLineRenderer"
            />
        </mx:series>
     </mx:LineChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>

The executing SWF file for the previous example is shown below:

For more information on using renderer classes to change the appearance of ChartItem objects such as the LineChart control's line segments, see Skinning ChartItem objects.

Using vertical lines in a LineChart control

You can create LineChart controls that show vertical progression. The following example shows two LineSeries in a LineChart control that are displayed vertically rather than horizontally:

A LineChart control with its series rendered vertically rather than horizontally.

To make lines in a LineChart control display vertically rather than horizontally, you must do the following:

  • Explicitly define the xField and yField properties for the LineSeries object.
  • Set the sortOnXField property of the LineSeries object to false.

By default, data points in a series are sorted from left to right (on the x-axis) before rendering. This causes the LineSeries to draw horizontally. When you disable the xField sort and explicitly define a yField property, Flex draws the lines vertically rather than horizontally.

Flex does not sort any data vertically. As a result, you must ensure that your data is arranged correctly in the data provider. If it is not arranged correctly, Flex renders a zig-zagging line up and down the chart as it connects those dots according to position in the data provider.

The following example creates a LineChart control that displays vertical lines:

<?xml version="1.0"?>
<!-- charts/VerticalLineChart.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2000, Expenses:1100},
        {Month:"Feb", Profit:1800, Expenses:1055},
        {Month:"Mar", Profit:1200, Expenses:800},
        {Month:"Apr", Profit:1400, Expenses:900},
        {Month:"May", Profit:1400, Expenses:1150},
        {Month:"Jun", Profit:1340, Expenses:600},
        {Month:"Jul", Profit:1600, Expenses:950},
        {Month:"Aug", Profit:1500, Expenses:1140},
        {Month:"Sep", Profit:1800, Expenses:1200},
        {Month:"Oct", Profit:2000, Expenses:1280},
        {Month:"Nov", Profit:2400, Expenses:1300},
        {Month:"Dec", Profit:1500, Expenses:500}
     ]);
  ]]></mx:Script>
  <mx:Panel title="Vertical Line Chart">
     <mx:LineChart id="myChart" 
        dataProvider="{expenses}" 
        showDataTips="true"
     >
        <mx:verticalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month"
           />
        </mx:verticalAxis>
        <mx:series>
           <mx:LineSeries 
                xField="Profit" 
                yField="Month" 
                displayName="Profit" 
                sortOnXField="false"
           />
           <mx:LineSeries 
                xField="Expenses" 
                yField="Month" 
                displayName="Expenses" 
                sortOnXField="false"
           />
        </mx:series>
     </mx:LineChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>

The executing SWF file for the previous example is shown below: