Using Flex Builder 2 > Developing a Flex Application User Interface > Building a Flex User Interface > Adding charting components

Adding charting components

You can use Flex Builder to add charting components to display data in your user interface. The charting components in Flex let you create some of the most common chart types, and also give you extensive control over the appearance of your charts. For an overview of the different charts available, see Chart Types in Flex 2 Developer's Guide.

The Flex charts are available in Adobe Flex Builder with Charting. A trial version of the charts is included in the standard version of Flex Builder. You can also obtain the full version of the charts by purchasing Adobe Flex Charting components 2, a separate product.

This section describes how to add charting components to your user interface. For information on defining chart data, formatting chart elements, and manipulating other aspects of charts, see Introduction to Charts in Flex 2 Developer's Guide.

To add a charting component:

1. In the MXML editor's Design mode, drag a charting component from the Components view into your user interface.

   The Create Chart dialog box appears:

   
   
   

2. Enter an ID for the chart.
3. To display more than one series of data in your chart, click the Add button and enter the new series name in the dialog box that appears.

   For example, the following ColumnChart control has two data series. The first is the gross profit for six months represented by the orange columns, and the second is the net profit during the same period represented by the green columns.

   
   
   

   Remove a data series by selecting it in the list and clicking the Delete button.

4. (Optional) Select the Include Legend option.

   The Include Legend option lets you add a Legend control to the chart that displays the label for each data series in the chart and a key showing the chart element for the series.

5. Click OK to insert the chart.

Flex 2.01