Astra Charts

BarChart, ColumnChart, LineChart, and PieChart are a set of visualization components that show tabular data in various graphical representations.

• Getting Started
• Using
• Examples
• ActionScript 3 Class Reference
• Back to Astra Flash Components

Getting Started: Charts for Flash CS3

Similar to other Flash components, you can create a chart by placing an instance on the stage or by using ActionScript to create an instance dynamically.

• Initializing a Chart on Stage
• Initializing a Chart with ActionScript

Initializing a Chart on Stage

The easiest way to create a chart is to drag one of the chart components, such as ColumnChart, from the Components panel to the stage. This will immediately create a instance of the chart and add it to the display list. You may use the Properties panel to set some of its basic properties, such as the data provider and category names, and to change the position and size of the component. For more advanced functionality, you will need to manipulate the chart with ActionScript.

Download the SimpleColumnChart.fla to see how this example was created.

Initializing a Chart with ActionScript

To add a chart to your application with ActionScript, you must first include one of the chart components in your library. Drag a chart from the Components panel directly to the library, or drag an instance to the stage and delete it (the component will stay in your library). Additionally, you must import the following packages in your class or frame script.

import com.yahoo.astra.fl.charts.*;
import com.yahoo.astra.fl.charts.series.*;

The package com.yahoo.astra.fl.charts.* contains the main classes you will access when using charts in your applications. Each specific chart type, such as ColumnChart or PieChart, and other classes, such as the various axis types, reside in this package. The second import, com.yahoo.astra.fl.charts.series.*, gives you access to series classes for the individual chart types. Examples include LineSeries and BarSeries, among others. These classes allow you to customize how a particular series should be displayed, or you may use them to create charts that combine more than one type of series. Importing the entire package in either case is completely optional, and you may instead opt to import only the classes that you intend to use within your project.

Like any other Flash display object, you must add a chart to the display list by passing it to the addChild() method on the intended parent. The following ActionScript code instantiates a ColumnChart with the same properties as the previous example where we simply dragged the chart to the stage.

var chart:ColumnChart = new ColumnChart();
chart.x = 10;
chart.y = 10;
chart.width = 230;
chart.height = 190;
this.addChild( chart );

chart.categoryNames = [ "Mon", "Tue", "Wed", "Thu", "Fri" ];
chart.dataProvider = [ 34, 16, 47, 22, 8 ];

As you can see, charts can be used like any other components in Flash. This code demonstrates how to change the chart's position, resize the chart, and pass it some data to display through the dataProvider and categoryNames properties. The chart will draw five columns in a single series. The most basic form of data a chart can accept is an Array filled with numeric values.

Visit the Charts Examples page and download the Financial Timeline project files for a more complex demonstration of how to instantiate a chart with ActionScript.

Learning More

For additional topics, please read Using Charts, or take a look at the other examples. The ActionScript Class Reference for the Astra library of Flash components contains full details on every property, method, and style available to the charts.