Specifications

89ADOBE FLEX 3

Building and Deploying Adobe Flex 3 Applications

Specifying gutter styles

Specify gutter styles when possible. The gutter area of a Cartesian chart is the area between the margins and the

actual axis lines. With default values, the chart adjusts the gutter values to accommodate axis decorations. Calcu-

lating these gutter values can be resource intensive. By explicitly setting the values of the

gutterLeft,

gutterRight, gutterTop, and gutterBottom style properties, your charts draw quicker and more efficiently.

Using drop shadows

To improve performance, do not use drop-shadows on your series items unless they are necessary. You can selec-

tively add shadows to individual chart series by using renderers such as the ShadowBoxItemRenderer and

ShadowLineRenderer classes.

Shadows are implemented as filters in charting controls. As a result, you must remove these shadows by setting

the chart control’s

seriesFilters property to an empty Array. The following example removes the shadows

from all series, but then changes the renderer for the third series to be a shadow renderer:

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script><![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

public var expenses:ArrayCollection = new ArrayCollection([

{Month: "Jan", Income: 2000, Expenses: 1500, Profit: 500},

{Month: "Feb", Income: 1000, Expenses: 200, Profit: 800},

{Month: "Mar", Income: 1500, Expenses: 500, Profit: 1000}

]);

]]></mx:Script>

<mx:Panel title="Column Chart">

<mx:ColumnChart id="myChart" dataProvider="{expenses}">

<mx:seriesFilters>

<mx:Array/>

</mx:seriesFilters>

<mx:horizontalAxis>

<mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/>

</mx:horizontalAxis>

<mx:series>

<mx:ColumnSeries xField="Month" yField="Income" displayName="Income"/>

<mx:ColumnSeries xField="Month" yField="Expenses" displayName="Expenses"/>

<mx:ColumnSeries xField="Month" yField="Profit" displayName="Profit"

itemRenderer="mx.charts.renderers.ShadowBoxItemRenderer"/>

</mx:series>

</mx:ColumnChart>

<mx:Legend dataProvider="{myChart}"/>