How to make a Line Chart in Flex with static data

No comments - This post in romanian

The following example shows how you can create a LineChart in Flex by using static data from an array. The chart is created in MXML without any ActionScript code. The example shows you how you can create a simple animated chart without knowing ActionScript (with ActionScript you can create more dynamic and interactive charts, but for beginning this is the simplest aproach).

In order to do this example, you need Adobe Flash Builder 4 (if you are a student, faculty or staff of eligible educational institutions, you can benefit from the Free Flex for Education program)

1. Start Adobe Flash Buider 4 (or Adobe Flex Builder 3) and select New –> MXML Application

2. Name the application, LineChartExample, and select a vertical layout for it (the components will be displayed one after each other)

New MXML Application

New MXML Application

3. The default MXML structure of this application is (you can see it in Source Window):

<?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">
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
</s:Application>

4. Define the data as an array. After the </fx:Declarations> tag add the declaration

<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection; 
 
			[Bindable] 
			public var series1:ArrayCollection = new ArrayCollection([ 
				{Month:"18 nov", value:3.1555}, 
				{Month:"22 nov", value:4.5274}, 
				{Month:"24 nov", value:5.2368}, 
				{Month:"26 nov", value:4.2581}, 
				{Month:"30 nov", value:3.7861}, 
				{Month:"3 dec", value:5.2435}, 
				{Month:"7 dec", value:4.8179}, 
				{Month:"9 dec", value:5.1199} 
			]); 
			[Bindable] 
			public var series2:ArrayCollection = new ArrayCollection([ 
				{Month:"18 nov", value:4.2960}, 
				{Month:"22 nov", value:3.8957}, 
				{Month:"24 nov", value:4.3079}, 
				{Month:"26 nov", value:5.1137}, 
				{Month:"30 nov", value:4.2842}, 
				{Month:"3 dec", value:3.5997}, 
				{Month:"7 dec", value:4.3006}, 
				{Month:"9 dec", value:5.6100} 
			]);
		]]>
	</fx:Script>

As you can see, there are 2 lists. Each list has 8 elements, which represents pair values for a date and a value. For example, {Month:”22 nov”, value:4.1274}, represent an element from the array that has 2 values. String values are placed between “ ”. Each element of the array is separated by , (comma)

5. Add the line chart. There are 2 ways to do that:

  • from Design mode select the Line chart component and drag it on the scene; after that set the 2 series elements and the legend
Charts Components

Charts Components

Line Chart Options

Line Chart Options

  • in the MXML source add after the </fx:Script> ending tag:
	<mx:linechart id="linechart1">
		<mx:series>
			<mx:lineseries yfield="" displayname="Series 1" />
			<mx:lineseries yfield="" displayname="Series 2" />
		</mx:series>
	</mx:linechart>
	<mx:legend dataprovider="{linechart1}" />

6. Make the connection between the line series and the data series by adding to the <mx:lineseries…/> tag the dataProvider property; also indicate the value to use from the array with the yField property; the line series become:

<mx:series>
	<mx:lineseries yfield="value" displayname="Series 1" dataprovider="{series1}" />
	<mx:lineseries yfield="value" displayname="Series 2" dataprovider="{series2}" />
</mx:series>

7. Add the horizontal axis and bind it to the month value from the first data series. The <mx:horizontalAxis> is added between <mx:LineChart> and </mx:LineChart>

<mx:horizontalaxis>
	<mx:categoryaxis dataprovider="{series1}" categoryfield="Month" />
</mx:horizontalaxis>

8. Set the minimum and maximum values for the vertical axis by adding <mx:verticalAxis> tag between <mx:LineChart> and </mx:LineChart>:

<mx:verticalaxis>
		<mx:linearaxis minimum="2.5" maximum="6.5" interval="0.1" />
</mx:verticalaxis>

9. Add data tips on the chart that are showed when the user cursor intersects the chart lines. Modify the <mx:LineChart> tag like this:

<mx:linechart id="linechart1" showdatatips="true">

10. You can modify the default color of a line, whith the <mx:lineStroke> tag like this:

<mx:lineseries yfield="value" displayname="Series 1" dataprovider="{series1}">
		<mx:linestroke>
			<mx:stroke color="#ffcc00" weight="3" />
		</mx:linestroke>
</mx:lineseries>
<mx:lineseries yfield="value" displayname="Series 2" dataprovider="{series2}" />

11. The chart is tested by Run command (Run –> Run LineChartExample from menu or CTRL + F11)

Get Adobe Flash player


The source file for this example can be downloaded from Line Chart Example – MXML source


  1. No comments yet.
(will not be published)

  1. No trackbacks yet.