Charting with Flex 4.0

April 1, 2011

Flex 4 Charting

Charting is a mechanism of depicting data using graphical elements known as charts.

Flex charts are persuasive with using static charts and as well animated. Flex enables to create interactive and attractive dashboards also.
This article describes how to create charts, the customization, use multiple axes, and support user interaction using Flex. Flex Charts can also be programmed to work with drag-and-drop operations and draw selections on a collection of data points.

All the Flex charts extend either the Cartesian or the PolarChart class. Cartesian charting works with on the basis of the Cartesian coordinate system using x and y points to describe data points on vertical & horizontal axes. The PolarChart class is base for pie chart that helps to describe regions within a rounded or radial space.

Charts can be created using MXML components or ActionScript classes.

Components in Chart:

Chart: The chart is the structure that connects to various parts.
Series: A compilation of associated data points
Axes: Two type as Horizontal and vertical axes. Flex’s charts are the two-dimensional Flex charts can have can have multiple axes.
Axis renderers: for Rendering lines and labels
Elements: Various parts like points, annotations, grid lines etc to be displayed.
Labels: Labeling the aces and series

Flex provides various types of charts including Area, Bar, Bubble, Candlestick, Column, HLOC, Line, Pie and Plot. It also provides the corresponding Chart classes and Series component classes for the above list.

Series are collections of associated information used for charts to display. Every chart can have at least one series. Each chart type associates with a corresponding series component. The series data can be statically defined or retrieved from remote objects or web services.

How to create Chart?

Creating a chart involves selecting a chart type and using its analogous series component to design the data points, and supplying at least a horizontal axis.

The following Flex program displays the Area Chart:

Area Chart Example

<?xml version="1.0"?>
	<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"
		height="600">
		<fx:Script><![CDATA[
			import mx.collections.ArrayCollection;
			// using ArrayCollection as data provider
			[Bindable]
			public var companyExpenses:ArrayCollection = new ArrayCollection([
				{Quarter:"Q1", Profit:1000, Expenses:1500, Amount:750},
				{Quarter:"Q2", Profit:2000, Expenses:200, Amount:200},
				{Quarter:"Q3", Profit:1500, Expenses:500, Amount:900},
				{Quarter:"Q4", Profit:2500, Expenses:500, Amount:500}
			]);
		]]></fx:Script>
		<s:Panel title="Areal Chart">
			<s:layout>
				<s:VerticalLayout/>
			</s:layout>
			<!-- adding the Area Chart -->
			<mx:AreaChart id="myAreaChart" dataProvider="{companyExpenses}"
				showDataTips="true">
				<!-- defining the horizontal axis -->
				<mx:horizontalAxis>
					<mx:CategoryAxis
						dataProvider="{companyExpenses}"
						categoryField="Quarter"/>
				</mx:horizontalAxis>
				<mx:series>
					<!-- Defining AreaSeries for Area Chart -->
					<mx:AreaSeries
						yField="Profit"
						displayName="Profit"/>
				</mx:series>
			</mx:AreaChart>
			<!-- adding the legend -->
			<mx:Legend dataProvider="{myAreaChart}"/>
		</s:Panel>
	</s:Application>

The output shows:

Working with Line Charts

Let us consider the Mobile sales report in XML format as below:

<mobilesales>
		<data interval="Q1" mobile="1" xSales="2.32"
			mUnits="2" ySales="1.23"/>
		<data interval="Q2" mobile="2" xSales="2.42"
			mUnits="3" ySales="1.18"/>
		<data interval="Q3" mobile="3" xSales="2.22"
			mUnits="4" ySales="1.28"/>
		<data interval="Q4" mobile="4" xSales="2.52"
			mUnits="1" ySales="2.18"/>
	</mobilesales>

The line chart can be created as follows:

<?xml version="1.0" encoding="utf-8"?>
	<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:mx="library://ns.adobe.com/flex/mx" >
		<fx:Declarations>
			<fx:XML id="dataXML" source="salesData.xml"/>
			<s:XMLListCollection id="salesData"
					 source="{dataXML.data}"/>
		</fx:Declarations>
		<s:Panel title="Mobile Product Sales" width="500" height="250">
			<s:layout><s:VerticalLayout/></s:layout>
			<mx:Legend dataProvider="{salesChart}"/>
			<mx:LineChart id="salesChart"
				dataProvider="{salesData}"
				height="100%" width="100%">
				<mx:horizontalAxis>
					<mx:CategoryAxis
						categoryField="@interval"/>
				</mx:horizontalAxis>
				<mx:series>
					<mx:LineSeries
						yField="@mobile"
						displayName="Mobiles"/>
					<mx:LineSeries
						yField="@mUnits"
						displayName="Mobile Units"/>
				</mx:series>
			</mx:LineChart>
		</s:Panel>
	</s:Application>

The output is shown as below:

The Y axis is called as value axis as it represents the value in the series. It by default starts at 0 value and goes to the largest value identified in the series.