Making Charts in Flex Builder 3
Posted by beThinker | Posted in Flex | Posted on 29-03-2010
Flex supports some of the most common types of two-dimensional charts (such as bar, column, and pie charts) and gives you a great of control over the appearance of charts. Charting is one type of data visualization in which you create two-dimensional representations of your data.
Simple chart shows a single data series, where a series is a group of related data points. For example, a data series might be a company profits. Another chart might be add a second data series. You might include the percentage growth of profits over the same business quarters.
Now, I assumed that you already have a Flex Builder Professional installed in your pc or you can go to Adobe website.
Flex charting controls lets you create some of the most common chart types, and also lets you customize the appearance of you charts. The charting controls are located in the mx.chart.* package.
The following tables lists the supported chart types, the name of the control class, and the name of the series class that you use to define what data appears in each chart.
| Chart Type | Chart Control Class | Chart Series Class | ||
| Area | AreaChart | AreaSeries | ||
| Bar | BarChart | BarSeries | ||
| Bubble | BubbleChart | BubbleSeries | ||
| Candlestick | CandlestickChart | CandlestickSeries | ||
| Column | ColumnChart | ColumnSeries | ||
| HighLowOpenClose | HLOChart | HLOSeries | ||
| Line | LineChart | LineSeries | ||
| Pie | PieChart | PieSeries | ||
| Plot | PlotChart | PlotSeries |
In this example, will be using the Bar chart but before we begin lets try to look the BarChart and BarSeries Class description.
BarChart
The BarChart control represents data as a series of horizontal bars whose length is determined by values in the data. A BarChart control can represent different chart variations, including simple bars, clustered bars, stacked, 100% stacked, and high/low.
The BarChart control expects its series property to contain an array of BarSeries objects.
Stacked and 100% bar charts override the minField property of their BarSeries objects.
BarSeries
Defines a data series for a BarChart control. By default, this class uses BoxItemRenderer class. Optionally, you can define an itemRenderer for the data series. The itemRenderer must implement the IDataRenderer interface.
yField – Specifies the field of the data provider that determines the y-axis location of the base of each bar in the chart. If you omit this property, Flex arranges the bars in the order of the data in the data provider.
xField – Specifies the field of the data provider that determines the x-axis location of the end of each bar.
miniField – Specifies the field of the data provider that determines the x-axis location of the base of a bar. This property has no effect in overlaid, stacked, or 100% stacked charts. For more information on using the minField property.
The following example creates a simple BarChart control:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var expenses:ArrayCollection = new ArrayCollection([ {Month:"January", Profit:4400, Expenses:2000}, {Month:"February", Profit:2600, Expenses:400}, {Month:"March", Profit:3300, Expenses:1000} ]); ]]> </mx:Script> <mx:Panel title="Bar Chart" horizontalAlign="left" verticalAlign="top"> <mx:BarChart id="myChart" dataProvider="{expenses}" showDataTips="true"> <mx:verticalAxis> <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/> </mx:verticalAxis> <mx:series> <mx:BarSeries yField="Month" xField="Profit" displayName="Profit"/> <mx:BarSeries yField="Month" xField="Expenses" displayName="Expenses"/> </mx:series> </mx:BarChart> <mx:Legend dataProvider="{myChart}"/> </mx:Panel> </mx:Application> |
A bar chart is essentially a column chart rotated 90 degress clockwise; therefore, bar charts and column charts share many of the same characteristics. For more information please see the live doc in Adobe Flex, click here.
