Java Tutorial Blog

Charting with Flex 4.0

//  by 

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.

also read:

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.

The X axis is called as category axis as it represents the category. It labels by default are spread as with the width of the chart.

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.

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

Applying Area Chart for the same data:

Area Chart Example

<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: 

<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:

<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:

Types of Charts

What is Bubble Chart?

Bubble charts enable to add a third dimension using the size of a bubble as a way of depicting scale. Flex supports normally two-dimensional charts but using this chart, that feature can be enhanced.

minRadiusis Number property specifies minimum value for a data point with defaults value as 0. Similarly maxRadius is with 50 as default.
xField property is optional and contains the related category value.
yField property contains the category/value field.
radiusField property contains the value for the size of the bubble.

The following code illustrates the Bubble chart:

using Bubble chart

<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			[Bindable]
			private var series1:ArrayCollection = new ArrayCollection( [
				{"xVal": 30, "yVal": 10, "rad":Math.random()*100 },
				{"xVal": 40, "yVal": 20, "rad":Math.random()*100 } ,
				{"xVal": 50, "yVal":30, "rad":Math.random()*100 }]);
			[Bindable]
			private var series2:ArrayCollection = new ArrayCollection( [
				{"xVal": 20, "yVal": 20, "rad":Math.random()*100 },
				{"xVal": 30, "yVal": 30, "rad":Math.random()*100 },
				{"xVal": 40, "yVal": 40, "rad":Math.random()*100 } ]);
		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<s:Panel title="The Bubble Chart">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<mx:BubbleChart id="myChart"
			showDataTips="true">
			<mx:series>
				<mx:BubbleSeries
					dataProvider="{series1}"
					displayName="Series 1"
					xField="xVal" yField="yVal"
					radiusField="rad"/>
				<mx:BubbleSeries
					dataProvider="{series2}"
					displayName="Series 2"
					xField="xVal" yField="yVal"
					radiusField="rad"/>
			</mx:series>
		</mx:BubbleChart>
		<mx:Legend dataProvider="{myChart}"/>
	</s:Panel>

The output would show as:

HLOC and Candlestick charts

What are HLOC and Candlestick charts?

Candlesticks and HLOC charts require four parts in one chart. A vertical line specifies high and low values.
A rectangular box that contains the body represents on top of the line. If the box is unfilled, then the top of the box is the confirming the end value. And the bottom of the box is the starting value. If the box is filled in, the top of the box is the starting value if the box is filled in.

HLOC charts are also similar to the same. But they use left and right sticks to designate the starting and ending values.

A vertical line indicates the high and low values. This line represents the series of values.

A left tick indicates the starting value. A right tick indicates the ending value.

The variation is that candlesticks need all four data points. In spite of the HLOC’s name, the starting value is optional. The four data points are needed to build the Candlestick Series and HLOCSeries.

  • highField property contains the high value
  • lowField property contains the low value
  • openField property contains the open value; optional for HLOCSeries
  • closeField property contains the close value
  • xField property contains the category value for the X axis that is optional.

Creating the Candlestick Chart:

<fx:Declarations>
		<fx:XML id="stockXML" source="hloc.xml"/>
		<s:XMLListCollection id="stockInfo"
			source="{stockXML.info}"/>
	</fx:Declarations>
	<s:Panel title="Mobile Stock Quotes"
		width="500" height="250">
		<s:layout><s:VerticalLayout/></s:layout>
		<mx:CandlestickChart id="stockChart"
			dataProvider="{stockInfo}"
			height="100%" width="100%">
			<mx:horizontalAxis>
				<mx:CategoryAxis
					categoryField="@sdate"/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:CandlestickSeries
					highField="@high" lowField="@low"
					openField="@opening" closeField="@closing"/>
			</mx:series>
		</mx:CandlestickChart>
	</s:Panel>
 
	===============================================
	Define the XML data as below for Mobile stock values
 
	<stockinfo>
		<info sdate="03/11/2011" high="25" low="10" opening="22" closing="23"/>
		<info sdate="03/12/2011" high="30" low="17" opening="28" closing="20"/>
		<info sdate="03/13/2011" high="40" low="22" opening="35" closing="30"/>
		<info sdate="03/14/2011" high="50" low="10" opening="45" closing="32"/>
		<info sdate="03/15/2011" high="60" low="40" opening="46" closing="48"/>
	</stockinfo>

The output is as shown below:

After changing the chart to HlocChart, the output would look like

The output is as shown below:

What is Pie Chart?

This chart is used to partition the data segments. The size of each segment indicates weight and value.

Consider the following mobile profit data:

<mobiledata>
		<profits>
			<info name="Mobile1" profit="387465"/>
			<info name="Mobile2" profit="578233"/>
			<info name="Mobile3" profit="467957"/>
			<info name="Mobile4" profit="510647"/>
		</profits>
	</mobiledata>

The pie chart can be implemented as below:

<?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" minWidth="955" minHeight="600">
		<fx:Declarations>
			<fx:XML id="mobileXML" source="mydata.xml"/>
			<s:XMLListCollection id="mobileData"
				source="{mobileXML.profits.info}"/>
		</fx:Declarations>
		<mx:Legend dataProvider="{mobileProfitChart}"/>
		<mx:PieChart id="mobileProfitChart"
			dataProvider="{mobileData}"
			height="100%" width="100%">
			<mx:series>
				<mx:PieSeries field="@profit" nameField="@name"
					labelPosition="callout"/>
			</mx:series>
		</mx:PieChart>

Types of Charts

What is Plot chart?

A plot is just like a grid and specifically defines where each data point provides. x and y coordinates will be used to plot sets of data.

Create a plot chart as below:

using Plot chart

<fx:Script> <![CDATA[
		import mx.collections.*;
		[Bindable]
		public var mydataSet:ArrayCollection;
		public function init():void {
			var myarray:Array = [];
			for (var i:int=0;i < 10;i++) {
				var setValues:Object = {
					A:Math.random()*100,
					B:Math.random()*100,
					C:Math.random()*100,
					D:Math.random()*100
				};
				myarray.push(setValues);
			}
			dataSet = new ArrayCollection(myarray);
		}
	]]></fx:Script>
 
	<s:Panel title="Plotting Chart">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<mx:PlotChart id="myChart"
			dataProvider="{dataSet}" showDataTips="true">
			<mx:series>
				<mx:PlotSeries
					xField="A"
					yField="B"
					displayName="Series X"/>
				<mx:PlotSeries
					xField="C"
					yField="D"
					displayName="Series Y"/>
			</mx:series>
		</mx:PlotChart>
		<mx:Legend id="l1" dataProvider="{myChart}"/>
	</s:Panel>

The output of plot chart is:

Customizing charts

How to customize charts?

Flex API enables us to work with various charts and provides support to customize them as well.

What is Series stroke?

A stroke enhances the visualization of the line or the outside of the series. To apply a stroke,Property needs to be identified to use for a specified series.

Changing the previous chart by adding the color

<fx:Declarations>
		<fx:XML id="mobileXML" source="mydata.xml"/>
		<s:XMLListCollection id="mobileData"
			source="{mobileXML.profits.info}"/>
		<fx:Array id="coloring">
			<s:SolidColor color="Yellow" alpha="0.5"/>
			<s:SolidColor color="Maroon" alpha="0.5"/>
			<s:SolidColor color="Red" alpha="0.5"/>
			<s:SolidColor color="Blue" alpha="0.5"/>
		</fx:Array>
	</fx:Declarations>
 
	<mx:Legend dataProvider="{mobileProfitChart}"/>
	<mx:PieChart id="mobileProfitChart"
		dataProvider="{mobileData}"
		height="100%" width="100%" >
		<mx:series>
			<mx:PieSeries field="@profit" nameField="@name"
				labelPosition="callout" fills="{coloring}"/>
		</mx:series>
	</mx:PieChart>

Conclusion

Charting in Flex is very powerful as it can be used to implement various charts for the requirements and building dashboards.

Charts consists of many parts that include series, axes, labels, sub charts , and elements.

Flex provides support for implementing nine types of charts that are required to address to the common requirements. The stroke and fills features can be used to enhance the charts display for effective customization.

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.