When you
use multiple data series in the AreaChart, BarChart,
and ColumnChart controls,
you can control how Flex displays the series using the type property
of the controls. The following table describes the values that the type property supports:
Property
Description
clustered
Chart
elements for each series are grouped by category. This is the default
value for BarChart and ColumnChart controls.
overlaid
Chart elements for each series are rendered
on top of each other, with the element corresponding to the last
series on top. This is the default value for AreaChart controls.
stacked
Chart elements for each series are stacked
on top of each other. Each element represents the cumulative value
of the elements beneath it.
100%
Chart elements are stacked on top of each
other, adding up to 100%. Each chart element represents the percentage that
the value contributes to the sum of the values for that category.
The following example creates an AreaChart control that has four
data series, stacked on top of each other:
<?xml version="1.0"?>
<!-- charts/AreaStacked.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.send()"
height="600">
<fx:Declarations>
<!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
<mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
<!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Panel title="Stacked AreaChart">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:AreaChart id="myChart"
dataProvider="{srv.lastResult.data.result}"
showDataTips="true"
type="stacked">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Month"/>
</mx:horizontalAxis>
<mx:series>
<mx:AreaSeries yField="profit" displayName="Profit"/>
<mx:AreaSeries yField="expenses" displayName="Expenses"/>
<mx:AreaSeries yField="amount" displayName="Amount"/>
</mx:series>
</mx:AreaChart>
<mx:Legend dataProvider="{myChart}"/>
</s:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:
The following example shows a stacked AreaChart control:
With an overlay, the last series appears on top, and can obscure
the data series below it unless you use the alpha property
of the fill to make it transparent. For more information, see Using fills with chart controls.
If you set the type property to 100%, the control
draws each series stacked on top of each other, adding up to 100%
of the area. Each column represents the percentage that the value
contributes to the sum of the values for that category, as the following
example shows:
You can use the ColumnSet, BarSet, and AreaSet classes to combine
groups of chart series, and thereby use different types of series
within the same chart. The following example uses BarSet classes
to combine clustered and stacked BarSeries in a single chart. The
example shows how to do this in MXML and ActionScript:
The executing SWF file for the previous example is shown below:
The resulting chart shows two clustered series; one is a standalone
series, and the other is a stacked series, as the following example
shows:
Normally, the values in stacked series are additive, which means
that they are all added to one another to create an ever larger
data item (column or bar or area). When one or more values is negative,
the rendering of the data items can be unpredictable because adding
a negative value would normally take away from the data item. You
can also use the allowNegativeForStacked property
of the AreaSet, BarSet, and ColumnSet classes to let a stacked series
include data with negative values, and thereby render negative data
items that are properly stacked.
The following example stacks the Profit and Expenses fields,
in which some of the values are negative.
The executing SWF file for the previous example is shown below:
The resulting chart shows three months of data, with all expenses
and some income data rendering in negative values:
You can create cascading or waterfall column charts by using
the ColumnChart control. One way to do this is to create an invisible
series and to use that to set the variable height of the other columns,
creating the waterfall effect. The following is an example of a
waterfall chart:
