Charting with Flex 4.0

Chart Legends & Filters

What is Legend?

The Legend component resides outside of the chart tag. The legend connects with the chart’s id property for its source data. The legend recognizes chart’s child series and extorts the design attributes of each series.

1

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

Applying Area Chart for the same data:

Area Chart Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<mx:AreaChart id="mobileSalesChart"
		dataProvider="{salesData}"
		height="100%" width="100%">
		<mx:horizontalAxis>
			<mx:CategoryAxis categoryField="@interval"/>
		</mx:horizontalAxis>
		<mx:series>
			<mx:AreaSeries yField="@mobile"
				displayName="Mobiles"
				alpha="0.6"/>
			<mx:AreaSeries yField="@mUnits"
				displayName="Mobile Units"
				alpha="0.6"/>
		</mx:series>
	</mx:AreaChart>

The output would show as:

Converting the chart into Bar chart

Let us consider the Mobile sales report in XML format for this chart:

1
2
3
4
5
6
7
8
9
10
11
12
13

<mx:BarChart id="salesChart"
		dataProvider="{salesData}"
		height="100%" width="100%">
		<mx:verticalAxis>
			<mx:CategoryAxis categoryField="@interval"/>
		</mx:verticalAxis>
		<mx:series>
			<mx:BarSeries xField="@mobile"
				displayName="Mobiles"/>
			<mx:BarSeries xField="@mUnits"
				displayName="Mobile Units"/>
		</mx:series>
	</mx:BarChart>

The output is as shown below:

How to filter Chart Data?

Flex 4 provides three techniques to filter the chart data.

• filterData
• filterDataValues
• filterFunction

filterData is the most fundamental option and holds the boolean value. If it is set to true then invalid null, invalid values in dataset, NAN, undefined, and out of range values will be removed.

The default value is false.

The filterData value will be ignored, If the filterFunction or filter-DataValues properties of Series is set.

filterDataValues gives the ability to filter null, undefined , NAN and out of range values from the dataset.

If data Series has a filterFunction set, then filter-DataValues property will be ignored.

The filter-Function property is the most powerful way of doing the filtering. A filterFunction defined accepts an Array that relates the Series and returns an Array of items.

What is stacking chart?

Stacking is useful feature for charts when to represent the chart with accumulative visualization of series.

Area chart, Bar chart, Column chart support this stacking feature.

The following example the stacking the bar chart:

1
2
3
4
5
6
7
8
9
10
11
12
13

<mx:BarChart type="stacked" id="salesChart"
		dataProvider="{salesData}"
		height="100%" width="100%">
		<mx:verticalAxis>
			<mx:CategoryAxis categoryField="@interval"/>
		</mx:verticalAxis>
		<mx:series>
			<mx:BarSeries xField="@mobile"
				displayName="Mobiles"/>
			<mx:BarSeries xField="@mUnits"
				displayName="Mobile Units"/>
		</mx:series>
	</mx:BarChart>

The output is shown as below:

Comments

comments