Using charting components
Requirements
User level
All
Required products
- Flex (Download trial)
Data visualization lets you present data in a way that simplifies data interpretation and data relationships. Charting is one type of data visualization in which you create two-dimensional representations of your data. Flex supports the most common types of two-dimensional charts (such as bar, column, and pie charts) and gives you a great deal of control over the appearance of charts.
The charting controls are located in the mx.charts.* package. The built-in charting controls include the following:
- AreaChart
- BarChart
- BubbleChart
- CandleStickChart
- ColumnChart
- HLOCChart (HighLowOpenClose)
- LineChart
- PieChart
- PlotChart
This Quick Start covers the following topics:
Defining chart data
The chart controls have a dataProvider property that defines the data for the chart. The data provider creates a level of abstraction between Flex components and the data that you use to populate them. You can populate multiple charts from the same data provider, switch data providers for a chart at run time, and modify the data provider so that changes are reflected by all charts using the data provider.
There are many ways to provide data to a chart control. These include:
- From remote data sources with the RPC controls such as HTTPService, WebService, or RemoteObject
- External files such an XML file
- Inline in ActionScript or MXML
The most common and versatile method for getting chart data is to use the RPC controls. The examples in this Quick Start use this method.
One possible source of data is an ASPX page request. For example, the following page is used by examples in this Quick Start as a data provider:
http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx
You can view the data by requesting that page in a browser. If you view the source of the page in your browser, you'll see that the data is in a simple XML format:
<data>
<result month="Jan">
<profit>2000</profit>
<expenses>1500</expenses>
<amount>450</amount>
</result>
<result month="Feb">
<profit>1000</profit>
<expenses>200</expenses>
<amount>600</amount>
</result>
<result month="Mar">
<profit>1500</profit>
<expenses>500</expenses>
<amount>300</amount>
</result>
</data>
In your Flex application, you bind the result of the HTTPService to the charting control's data provider, and specify which field corresponds to which axis in the chart. For example, the value of the month field will be used for the x or horizontal axis, and the value of the profit field will be used for the y or vertical axis. There are two series defined on this chart, so the expenses field will be used for an additional y axis value.
Example
The following example uses the expenses-xml.aspx page as a data provider for the chart:
<?xml version="1.0"?>
<!-- using_charting_controls/BasicColumn.mxml -->
<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"
creationComplete="srv.send()">
<fx:Declarations>
<!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
<mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
<!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Panel title="Column Chart">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:ColumnChart id="myChart"
dataProvider="{srv.lastResult.data.result}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="month"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
xField="month"
yField="profit"
displayName="Profit"/>
<mx:ColumnSeries
xField="month"
yField="expenses"
displayName="Expenses"/>
</mx:series>
</mx:ColumnChart>
</s:Panel>
</s:Application>
Result
Using data tips
Charts support data tips, which means that when you move the mouse over a series or an item in that series, you can see the actual value of the item. Data tips are instances of the DataTip object.
Adding data tips
To add data tips to charts, set the showDataTips property on chart control to true. You can style the DataTips by using the DataTip type selector in CSS.
Example
The following application sets the showDataTips property on the ColumnChart control to true and customizes the appearance of the DataTip:
<?xml version="1.0"?>
<!-- using_charting_controls/BasicColumnWithDataTips.mxml -->
<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"
creationComplete="srv.send()">
<fx:Declarations>
<!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
<mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
<!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->
</fx:Declarations>
<fx:Style>
@namespace chartClasses "mx.charts.chartClasses.*";
chartClasses|DataTip {
fontFamily: "Arial";
fontSize: 12;
fontWeight:bold;
fontStyle:italic;
}
</fx:Style>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Panel title="Column Chart">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:ColumnChart id="myChart"
dataProvider="{srv.lastResult.data.result}"
showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="month"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
xField="month"
yField="profit"
displayName="Profit"/>
<mx:ColumnSeries
xField="month"
yField="expenses"
displayName="Expenses"/>
</mx:series>
</mx:ColumnChart>
</s:Panel>
</s:Application>
Result
Customizing data tips
The default values displayed in the DataTip depends on the chart type, but typically it displays the names of the fields and the values of the data from the data provider.
You can customize the text displayed in a DataTip by using the dataTipFunction callback function. When you specify a dataTipFunction callback function on the chart control, you can access the data of the DataTip before Flex renders it and customize the text. The argument to the callback function is a HitData object. As a result, you must import mx.charts.HitData when using a DataTip callback function. Flex displays whatever the callback function returns in the DataTip box. You must specify a String as the callback function's return type.
You can use the HitData object to access the series or chart items within the series.
The DataTip callback function can render simple HTML for formatted DataTip objects. Flex supports a small subset of HTML tags including <FONT>, <B>, <I>, and <BR>.
Example
The following application casts the HitData object to a Series class so that it can get at the series's displayName property:
<?xml version="1.0"?>
<!-- using_charting_controls/HitDataCasting.mxml -->
<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"
creationComplete="srv.send()">
<fx:Declarations>
<!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
<mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
<!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->
</fx:Declarations>
<fx:Script><![CDATA[
import mx.charts.HitData;
import mx.charts.series.ColumnSeries;
public var b:Boolean = true;
public function myDataTipFunction(e:HitData):String {
var s:String;
s = ColumnSeries(e.element).displayName + "\n";
s += "Profit: $" + (e.item.profit - e.item.expenses);
return s;
}
]]></fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Panel title="Casting HitData Objects">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:ColumnChart id="myChart"
dataProvider="{srv.lastResult.data.result}"
showDataTips="true"
dataTipFunction="myDataTipFunction">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="month"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
yField="profit"
displayName="Income '10"/>
<mx:ColumnSeries
yField="expenses"
displayName="Expenses '10"/>
</mx:series>
</mx:ColumnChart>
</s:Panel>
</s:Application>
Result
Formatting charts
You can customize the appearance of most charting elements, from the axis lines to the tick marks and background elements. You can also customize the fills and strokes used on series, as well as the padding properties around a chart. This section introduces you to just some of the customizations you can make with charts.
Customizing series fills
When charting multiple data series, or just to improve the appearance of your charts, you can control the fill for each series in the chart or each item in a series. The fill lets you specify a pattern that defines how Flex draws the chart element. You also use fills to specify the background colors of the chart or bands of background colors defined by the grid lines. Fills can be solid or can use linear and radial gradients. A gradient specifies a gradual color transition in the fill color.
Example
The following application defines a custom fill for each series in the column chart by using the series' fill property:
<?xml version="1.0"?>
<!-- using_charting_controls/ColumnFills.mxml -->
<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"
creationComplete="srv.send()">
<fx:Declarations>
<!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
<mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
<!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Panel title="Column Chart">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:ColumnChart id="myChart" dataProvider="{srv.lastResult.data.result}" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="month"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
xField="month"
yField="profit"
displayName="Profit">
<mx:fill>
<mx:SolidColor color="0x336699"/>
</mx:fill>
</mx:ColumnSeries>
<mx:ColumnSeries
xField="month"
yField="expenses"
displayName="Expenses">
<mx:fill>
<mx:SolidColor color="0xFF99FF"/>
</mx:fill>
</mx:ColumnSeries>
</mx:series>
</mx:ColumnChart>
</s:Panel>
</s:Application>
Result
Customizing chart axes
Chart axes are defined by the AxisRenderer class. You can use strokes to define tick marks and other properties of an AxisRenderer. For tick marks, you use the tickPlacement and minorTickPlacement style properties to set the placement. You use the tickStroke and minorTickStroke properties to define properties of the lines themselves (such as thickness, alpha, and color). For axis lines, you use the axisStroke property.
Example
The following application defines the appearance of ticks and the stroke styles on an AxisRenderer:
<?xml version="1.0"?>
<!-- using_charting_controls/AxisRendererStrokes.mxml -->
<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"
creationComplete="srv.send()">
<fx:Declarations>
<!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
<mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/stocks-xml.aspx"/>
<!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/stocks.aspx -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Panel title="HighLowOpenClose Chart">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:HLOCChart id="myChart"
dataProvider="{srv.lastResult.data.result}"
showDataTips="true">
<mx:horizontalAxisRenderers>
<mx:AxisRenderer
placement="bottom"
canDropLabels="true"
tickPlacement="inside"
tickLength="10"
minorTickPlacement="inside"
minorTickLength="5"
axis="{a1}">
<mx:axisStroke>
<mx:SolidColorStroke color="#000080" weight="1"/>
</mx:axisStroke>
<mx:tickStroke>
<mx:SolidColorStroke color="#000060" weight="1"/>
</mx:tickStroke>
<mx:minorTickStroke>
<mx:SolidColorStroke color="#100040" weight="1"/>
</mx:minorTickStroke>
</mx:AxisRenderer>
</mx:horizontalAxisRenderers>
<mx:verticalAxis>
<mx:LinearAxis id="a1" minimum="30" maximum="50"/>
</mx:verticalAxis>
<mx:series>
<mx:HLOCSeries
openField="open"
highField="high"
lowField="low"
closeField="close"
displayName="FRED">
</mx:HLOCSeries>
</mx:series>
</mx:HLOCChart>
</s:Panel>
</s:Application>
Result
Adding legends
Support for legends is built in to the Flex charting controls. The easiest way to add a legend is to use the Legend class, and bind its data provider to the chart control. You can also create custom legends with different layouts or icons.
The Legend control is a subclass of the Tile class. You can use Tile properties and some properties of the Container class to format the Legend control. Also, the Legend control has properties (such as labelPlacement, markerHeight, and markerWidth) that you can use to format its appearance.
Example
The following application adds a simple Legend control to the chart:
<?xml version="1.0"?>
<!-- using_charting_controls/BasicColumn.mxml -->
<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"
creationComplete="srv.send()">
<fx:Declarations>
<!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
<mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
<!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Panel title="Column Chart">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:ColumnChart id="myChart"
dataProvider="{srv.lastResult.data.result}"
showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="month"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
xField="month"
yField="profit"
displayName="Profit"/>
<mx:ColumnSeries
xField="month"
yField="expenses"
displayName="Expenses"/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{myChart}" bottom="0"/>
</s:Panel>
</s:Application>
Result
Using effects with charts
Chart controls support the standard Flex effects such as Zoom and Fade. You can use these effects to make the entire chart control zoom in or fade out in your applications. In addition, chart data series support the following effect classes that apply to the data in the chart:
- SeriesInterpolate
- SeriesSlide
- SeriesZoom
All chart controls and series support the standard Flex triggers and effects that are inherited from UIComponent. These triggers include focusInEffect, focusOutEffect, moveEffect, showEffect, and hideEffect. The charting controls also include the showDataEffect and hideDataEffect triggers. A common uses of these effects and triggers are to cause a series to slide in with the showDataEffect, for example.
As with other Flex effects, you define charting effects in the <Declarations> block of the application. You then bind the effect to the charting control's series.
Example
The following application defines a basic interpolation effect when a new item is added to the chart series:
<?xml version="1.0"?>
<!-- using_charting_controls/SeriesInterpolateEffect.mxml -->
<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"
creationComplete="srv.send()">
<fx:Declarations>
<!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
<mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/widgets-xml.aspx" result="resultHandler(event)"/>
<!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/widgets.aspx -->
<!-- Define chart effect. -->
<mx:SeriesInterpolate id="rearrangeData"
duration="1000"
minimumElementDuration="200"
elementOffset="0"/>
</fx:Declarations>
<fx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var items:ArrayCollection;
public function addDataItem():void {
// Add a randomly generated value to the data provider.
var n:Number = Math.random() * 3000;
var o:Object = {item: n};
items.addItem(o);
}
private function resultHandler(e:Event):void {
items = ArrayCollection(srv.lastResult.data.result);
}
]]></fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Panel title="Column Chart with Series Interpolate Effect">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:ColumnChart id="myChart" dataProvider="{items}">
<mx:series>
<mx:ColumnSeries
yField="item"
displayName="Quantity"
showDataEffect="rearrangeData"/>
</mx:series>
</mx:ColumnChart>
</s:Panel>
<s:Button id="b1" click="addDataItem()" label="Add Data Item"/>
</s:Application>
Result
For more information
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.
