Charting with Flex 4.0

April 1, 2011

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>