| Flex 2 Developer's Guide > Charting Components > Chart Types > Using multiple axes | |||
|
|||
|
|||
|
|||
One potential problem when using two data series in a single chart is that if the scales of the data are very different, the data points might be plotted in very different areas on the chart's canvas. For example, one stock price could trade in the range of $100 to $150, while another stock price could fluctuate from $2 to $2.50. If you plot both stocks in the same chart, it would be difficult to see any correlation between the prices, even with a logarithmic axis.
To get around this problem, you use multiple axes in your charts so that each data series is positioned relative to its own axis. All chart controls that are subclasses of CartesianChart support adding a secondary set of data on a secondary scale in the horizontal axis, vertical axis, or both. (This applies to all charts except the PieChart control.) You can use values on a secondary axis to compare two sets of data that are on two different scales, such as stock prices that trade in different ranges.
The following example shows a stock price that trades within a $40 to 45 range, and another stock price that trades within a $150 to 160 range. The values of the axis on the left show the range of values of the first stock, and the values of the axis on the right show the range of values of the second stock:
By default, all charts that are subclasses of CartesianChart display a single set of data, and single horizontal and vertical axes. Setting any of the secondary properties, such as secondDataProvider, secondSeries, secondVerticalAxis/secondHorizontalAxis, or secondVerticalAxisRenderer/secondHorizontalAxisRenderer, has the following effect on the chart:
ColumnChart, LineChart, and AreaChart controls Primary and secondary series share the horizontalAxis by default, but each get a separate LinearAxis for their verticalAxis. A second verticalAxisRenderer is created by default when using multiple axes.
BarChart controls Primary and secondary series share the verticalAxis, but by default, each has a separate horizontalAxis. Two horizontalAxisRenderers are created by default.
PlotChart and BubbleChart controls Primary and secondary series have separate horizontal and vertical axes, and all four axis renderers. Bubble charts continue to share a single radialAxis among all series.
CartesianChart controls Cartesian charts have no extra axes or axis renderers by default.
PieChart controls Secondary series are not supported.
Use the <mx:secondSeries> tag to specify an Array of series objects that are rendered by using other scales. Any fields applied to series in this array refer to fields on the secondDataProvider.
You use the secondDataProvider property for the data provider used by any series provided in the secondSeries property.
The following example uses two series to allow a visual comparison of two stocks that trade in different ranges. It uses a single categoryField on the horizontalAxis for the horizontal values; it establishes minimum and maximum ranges of the tick marks for the verticalAxis and the secondVerticalAxis; and it uses the secondVerticalAxisRenderer to change the appearance of the secondary vertical axis.
<?xml version="1.0"?>
<!-- charts/MultipleAxes.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var SMITH:ArrayCollection = new ArrayCollection([
{date:"22-Aug-05", close:41.87},
{date:"23-Aug-05", close:45.74},
{date:"24-Aug-05", close:42.77},
{date:"25-Aug-05", close:48.06},
]);
[Bindable]
public var DECKER:ArrayCollection = new ArrayCollection([
{date:"22-Aug-05", close:157.59},
{date:"23-Aug-05", close:160.3},
{date:"24-Aug-05", close:150.71},
{date:"25-Aug-05", close:156.88},
]);
]]></mx:Script>
<mx:Panel title="Column Chart With Multiple Series">
<mx:ColumnChart id="myChart"
dataProvider="{SMITH}"
secondDataProvider="{DECKER}"
showDataTips="true"
>
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{SMITH}"
categoryField="date"
/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis minimum="40" maximum="50"/>
</mx:verticalAxis>
<mx:series>
<mx:ColumnSeries id="cs1"
dataProvider="{SMITH}"
xField="date"
yField="close"
displayName="SMITH"
/>
</mx:series>
<mx:secondVerticalAxis>
<mx:LinearAxis minimum="150" maximum="170"/>
</mx:secondVerticalAxis>
<mx:secondSeries>
<mx:LineSeries id="cs2"
dataProvider="{DECKER}"
xField="date"
yField="close"
displayName="DECKER"
/>
</mx:secondSeries>
</mx:ColumnChart>
</mx:Panel>
</mx:Application>
This example does not include a legend. When you create a chart with multiple axes, you cannot use the standard <mx:Legend> tag to create a legend for that chart. You must create a custom legend. For more information, see Creating a custom Legend control.
Subtopics
Depending on the chart type, secondary series may either share the same axes with the primary series or render against separate default secondary axes. Charts with horizontal and vertical axes use the secondHorizontalAxis and secondVerticalAxis properties to support the second series. If you explicitly provide a secondary horizontal or vertical axis, it is used by the secondary series, regardless of the chart type.
The following example defines the secondVerticalAxis as a LogAxis chart axis:
<mx:secondVerticalAxis>
<mx:LogAxis/>
</mx:secondVerticalAxis>
As with primary axes, you can change the appearance of the secondary axes using renderers. In this case, you use the <mx:secondVerticalAxisRenderer> and <mx:secondHorizontalAxisRenderer> tags. The following example sets the location of the tick marks for the secondary axis:
<mx:secondVerticalAxisRenderer>
<mx:AxisRenderer placement="left" tickPlacement="inside"/>
</mx:secondVerticalAxisRenderer>
For more information on formatting axes, see Working with axes
If a chart displays data with different vertical or horizontal scales, it must also render the multiple axes. You can specify where a particular axis renderer appears by setting the placement property of the axis renderer. Valid values are left, top, right, or bottom. The default value of the placement property of the primary renderer is left for vertical renderers and bottom for horizontal renderers. For secondary renderers, the default values are right and top.
You use the secondHorizontalAxisRenderer and secondVerticalAxisRenderer properties to control the appearance of the secondary axis, as the following example shows:
<?xml version="1.0"?>
<!-- charts/MultipleAxesMultipleRenderers.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="600"
height="600">
<mx:Script><![CDATA[
[Bindable]
public var SMITH:Array = [
{date: "22-Aug-05", close: 45.87},
{date: "23-Aug-05", close: 45.74},
{date: "24-Aug-05", close: 45.77},
{date: "25-Aug-05", close: 46.06},
];
[Bindable]
public var DECKER:Array = [
{date: "22-Aug-05", close: 157.59},
{date: "23-Aug-05", close: 157.3},
{date: "24-Aug-05", close: 156.71},
{date: "25-Aug-05", close: 156.88},
];
]]></mx:Script>
<mx:Panel title="Chart" width="400" height="400">
<mx:ColumnChart id="mychart"
dataProvider="{SMITH}"
secondDataProvider="{DECKER}"
showDataTips="true"
height="250"
width="350"
>
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{SMITH}"
categoryField="date"
/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis minimum="30" maximum="50"/>
</mx:verticalAxis>
<mx:series>
<mx:ColumnSeries
dataProvider="{SMITH}"
xField="date"
yField="close"
displayName="SMITH"
/>
</mx:series>
<mx:secondVerticalAxis>
<mx:LinearAxis minimum="150" maximum="170"/>
</mx:secondVerticalAxis>
<mx:verticalAxisRenderer>
<mx:AxisRenderer
placement="right"
tickPlacement="inside"
>
<mx:axisStroke>
<mx:Stroke color="#CC6699" weight="1"/>
</mx:axisStroke>
<mx:tickStroke>
<mx:Stroke color="#CC0099" weight="1"/>
</mx:tickStroke>
<mx:minorTickStroke>
<mx:Stroke color="#990066" weight="1"/>
</mx:minorTickStroke>
</mx:AxisRenderer>
</mx:verticalAxisRenderer>
<mx:secondVerticalAxisRenderer>
<mx:AxisRenderer
placement="left"
tickPlacement="inside"
>
<mx:axisStroke>
<mx:Stroke color="#000080" weight="1"/>
</mx:axisStroke>
<mx:tickStroke>
<mx:Stroke color="#000160" weight="1"/>
</mx:tickStroke>
<mx:minorTickStroke>
<mx:Stroke color="#100040" weight="1"/>
</mx:minorTickStroke>
</mx:AxisRenderer>
</mx:secondVerticalAxisRenderer>
<mx:secondSeries>
<mx:LineSeries
dataProvider="{DECKER}"
xField="date"
yField="close"
displayName="DECKER"
/>
</mx:secondSeries>
</mx:ColumnChart>
</mx:Panel>
</mx:Application>
Charts ensure that axis renderers do not overlay each other by automatically setting the placement property of the secondary axis renderers to lie opposite the primary axis renderers. If the verticalAxisRenderer sets the placement property to left, a secondVerticalAxisRenderer is placed on the right, and vice versa.
Flex 2.01
