Using Charts in Flash CS3

A developer has many options available for customizing and manipulating charts. The following topics describe a few important functionalities:

• How to Add a Legend
• How to Combine Chart Types
• How to Customize Axis Labels
• How to Skin a Chart

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 legend property.

chart.legend = legend;

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 ISeries instances.

var actualBars:BarSeries = new BarSeries(); actualBars.displayName = "Actual"; actualBars.dataProvider = [1602, 1637, 1682, 1745, 1804]; var idealLine:LineSeries = new LineSeries(); idealLine.displayName = "Ideal"; idealLine.dataProvider = [1500, 1550, 1650, 1750, 1950]; this.chart.dataProvider = [actualBars, idealLine];

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 CategoryAxis.

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.

/** * @private * Formats a numeric value to the form $#,####,### */ private function numberToCurrency(value:Number):String { var valueAsString:String = value.toString(); //check if negative, and remove the sign if present var negative:Boolean = valueAsString.indexOf("-") == 0; if(negative) { valueAsString = valueAsString.substr(1); } // add 1000s seperators var length:int = valueAsString.length; for( var i:int = length - 3; i > 0; i -= 3 ) { valueAsString = valueAsString.substr(0, i) + "," + valueAsString.substr(i); } //readd the negative sign, if needed if(negative) { valueAsString = "-" + valueAsString; } //add the dollar sign return "$" + valueAsString; }

Next, we create a new NumericAxis object and set its labelFunction property to the numberToCurrency() method we defined previously.

//we're going to give the chart a custom vertical axis var yAxis:NumericAxis = new NumericAxis(); //set the minimum value displayed by the axis yAxis.minimum = 11000; //format the labels of the vertical axis with a custom label function yAxis.labelFunction = numberToCurrency; //pass it to the chart this.chart.verticalAxis = yAxis;

The verticalAxis and 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: NumericAxis, CategoryAxis, and 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.

//set the chart font styles (applies to the horizontal and vertical axis) this.chart.setStyle("textFormat", new TextFormat("Arial", 12, 0xffffff, true)); //set the color, size, and skin for the line series in the chart this.chart.setStyle("seriesColors", [0xFDEC5C]); this.chart.setStyle("seriesMarkerSizes", [15]); this.chart.setStyle("seriesMarkerSkins", [CustomMarkerSkin]); //give the chart a custom background skin this.chart.setStyle("backgroundSkin", CustomBackgroundSkin); //style the axis colors this.chart.setStyle("horizontalAxisColor", 0x000000); this.chart.setStyle("verticalAxisColor", 0x000000); this.chart.setStyle("verticalAxisGridLineColor", 0x440044); this.chart.setStyle("verticalAxisTickColor", 0x000000); this.chart.setStyle("verticalAxisMinorTickColor", 0x000000); //style the data tip background and fonts this.chart.setStyle("dataTipBackgroundSkin", CustomDataTipBackgroundSkin); this.chart.setStyle("dataTipTextFormat", new TextFormat("Arial", 11, 0xffffff));

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.

Next Steps

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.