Using multiple data series

Charts that are subclasses of the CartesianChart class let you mix different data series in the same chart control. You can create a column chart with a trend line running through it or mix any data series with any other similar series.

You can use any combination of the following series objects in a CartesianChart control:

The following example mixes a LineSeries and a ColumnSeries:

<?xml version="1.0"?>
<!-- charts/MultipleSeries.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv_fred.send();srv_strk.send();"
    height="600">

    <fx:Declarations>
        <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/stocks.aspx -->  

        <!-- View source of the following pages to see the structure of the data that Flex uses in this example. -->
        <mx:HTTPService id="srv_fred" url="http://aspexamples.adobe.com/chart_examples/stocks-xml.aspx?tickerSymbol=FRED"/>
        <mx:HTTPService id="srv_strk" url="http://aspexamples.adobe.com/chart_examples/stocks-xml.aspx?tickerSymbol=STRK"/>
    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="Multiple Data Series" width="400" height="400">
     <s:layout>
         <s:VerticalLayout/>
     </s:layout>
     <mx:ColumnChart id="myChart"
        showDataTips="true"
        height="250"
        width="350">
        <mx:horizontalAxis>
           <mx:DateTimeAxis dataUnits="days"/>
        </mx:horizontalAxis>
        <mx:verticalAxis>
           <mx:LinearAxis minimum="40" maximum="50"/>
        </mx:verticalAxis>
        <mx:series>
           <mx:ColumnSeries
                dataProvider="{srv_fred.lastResult.data.result}"
                xField="date"
                yField="close"
                displayName="FRED">
           </mx:ColumnSeries>
           <mx:LineSeries
                dataProvider="{srv_strk.lastResult.data.result}"
                xField="date"
                yField="close"
                displayName="STRK">
           </mx:LineSeries>
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{myChart}"/>
  </s:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:

Using multiple series in the same chart works best when the data points are in a similar range (such as a stock price and its moving average). When the data points are in numerically very different ranges, the chart can be difficult to understand because, by default, the data is shown on a single axis. The solution to this problem is to use multiple axes, each with its own range. You can plot each data series on its own axis within the same chart using the techniques described in Using multiple axes.