Using Charts in Flash CS3
A developer has many options available for customizing and manipulating charts. The following topics describe a few important functionalities:
Adding a Legend
A legend helps a chart to convey more information to someone who must interpret its data. The Legend component may be used with each of the available chart types. The following example demonstrates how to use a Legend component with a PieChart component.
Simply pass a Legend instance to the PieChart's
That's it! The charts know exactly how to communicate with the Legend component to display the correct data. The Legend component automatically resizes so that all of the items it displays are visible.
Visit the Charts Examples page and download the Pie Chart with a Legend and Financial Timeline examples to learn more about how to use legends with your charts.
How to Combine Chart Types
Charts often combine different types of series, such as columns with lines, to visually differentiate the data they display. The following example shows how to add a LineSeries object to a BarChart to create a combination chart.
As you can see with the source code below, a chart's data provider may be a regular Array containing
The series type does not need to match the chart type, but other restrictions may not allow you to display certain series types in some charts. For instance, a
ColumnSeries requires that a chart's x-axis be of type
Visit the Charts Examples page and download the Build a Combination Chart example to learn more about how to combine chart types.
How to Customize Axis Labels
Often, a chart is more useful when its axis labels convey more information about the type of data the chart is displaying. The following example shows how to use an axis
labelFunction to format each of the labels on the chart's y-axis as currency.
In this example, the following function will be used to format the labels on the chart's axis.
Next, we create a new
NumericAxis object and set its
labelFunction property to the
numberToCurrency() method we defined previously.
horizontalAxis properties on a chart allow you create completely different axis types for your charts. In the
com.yahoo.astra.fl.charts.* package, three chart types already exist:
TimeAxis. Read the ActionScript Class Reference for full details about these axis types.
Visit the Charts Examples page and download the Financial Timeline or the Custom Skins examples to learn more about how to customize a chart's axis.
How to Skin a Chart
The ability to change styles and use a custom skin is very important when using components. You want the components' appearance to seamlessly blend with the theme of the rest of your application. The following example shows how to skin a LineChart control with symbols in the library.
In the ActionScript source code below, we customize the chart's text styles, marker skins and colors, the background skin, and several styles related to the axes and mouse over data tip.
Obviously, many different aspects of a chart's appearance may be customized. For a full listing of available styles, refer to the ActionScript Class Reference.
Visit the Charts Examples page and download the Custom Skins or PieChart with a Legend examples to learn more about how to change the styles and skins on a chart.
For additional information, please take a look at the Examples section for functional demonstrations or return to Getting Started for a quick start introduction to charts. The ActionScript Class Reference for the Astra library of Flash components contains full details on every property, method, and style available to the charts.