You can define effects and apply them to chart series by using ActionScript. One way to apply an effect is the same as the way you apply style properties. You use the setStyle() method and Cascading Style Sheets (CSS) to apply the effect. For more information on using styles, see Using Styles and Themes.

The following example defines the slideIn effect that plays every time the user adds a data item to the chart control's ColumnSeries. The effect is applied to the series by using the setStyle() method when the application first loads.

<?xml version="1.0"?>
<!-- charts/ApplyEffectsAsStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init()">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     import mx.charts.effects.SeriesInterpolate;

     [Bindable]
     public var items:ArrayCollection = new ArrayCollection([
        {item: 2000},
        {item: 3300},
        {item: 3000},
        {item: 2100},
        {item: 3200}
     ]);

     public var rearrangeData:SeriesInterpolate;

     public function init():void {
        rearrangeData = new SeriesInterpolate();
        rearrangeData.duration = 1000;
        rearrangeData.minimumElementDuration = 200;
        rearrangeData.elementOffset = 0;

        // Apply the effect as a style.
        mySeries.setStyle("showDataEffect", rearrangeData);
     }

     public function addDataItem():void {
        // Add a randomly generated value to the data provider.
        var n:Number = Math.random() * 3000;
        var o:Object = {item: n};
        items.addItem(o);
     }
  ]]></mx:Script>

  <mx:Panel title="Column Chart with Series Interpolate Effect">
     <mx:ColumnChart id="myChart" dataProvider="{items}">
        <mx:series>
           <mx:ColumnSeries
            id="mySeries"
            yField="item"
            displayName="Quantity"
           />
        </mx:series>
     </mx:ColumnChart>
  </mx:Panel>

  <mx:Button id="b1"
    click="addDataItem()"
    label="Add Data Item"
  />

</mx:Application>
The executing SWF file for the previous example is shown below:

When you define an effect in ActionScript, you must ensure that you import the appropriate classes. If you define an effect by using MXML, the compiler imports the class for you.

Instead of applying effects with the setStyle() method, you can apply them with CSS if you predefine them in your MXML application; for example:

<?xml version="1.0"?>
<!-- charts/ApplyEffectsWithCSS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:Style>
     ColumnSeries {
        showDataEffect:slideDown;
        hideDataEffect:slideDown;
     }
  </mx:Style>

  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;

     [Bindable]
     public var items:ArrayCollection = new ArrayCollection([
        {item:2000},
        {item:3300},
        {item:3000},
        {item:2100},
        {item:3200}
     ]);

     public function addDataItem():void {
        // Add a randomly generated value to the data provider.
        var n:Number = Math.random() * 3000;
        var o:Object = {item:n};
        items.addItem(o);
     }
  ]]></mx:Script>

  <!-- Define chart effect. -->
  <mx:SeriesSlide 
    duration="1000" 
    direction="down"
    minimumElementDuration="20" 
    elementOffset="30" 
    id="slideDown"
  />

  <mx:Panel title="Column Chart with Custom Series Slide Effect">
     <mx:ColumnChart id="myChart" dataProvider="{items}">
        <mx:series>
           <mx:ColumnSeries
            yField="item"
            displayName="Quantity"
           />
        </mx:series>
     </mx:ColumnChart>
  </mx:Panel>
  <mx:Button id="b1" 
    click="addDataItem()" 
    label="Add Data Item"
  />
</mx:Application>
The executing SWF file for the previous example is shown below:

You can use slider controls to adjust the effect's properties. To bind the properties of an ActionScript object, such as an effect, to a control, you use methods of the BindingUtils class, as the following example shows:

<?xml version="1.0"?>
<!-- charts/ApplyEffectsWithActionScriptSlider.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init()">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     import mx.charts.effects.SeriesInterpolate;
     import mx.binding.utils.BindingUtils;

     public var rearrangeData:SeriesInterpolate;
     
     [Bindable]
     public var items:ArrayCollection = new ArrayCollection([
        {item: 2000},
        {item: 3300},
        {item: 3000},
        {item: 2100},
        {item: 3200}
     ]);

     public function init():void {
        rearrangeData = new SeriesInterpolate();

        // Bind effect properties to slider controls
        BindingUtils.bindProperty(rearrangeData, "duration", durationSlider, "value");
        BindingUtils.bindProperty(rearrangeData, "minimumElementDuration", 
            minimumElementDurationSlider, "value");
        BindingUtils.bindProperty(rearrangeData, "elementOffset", 
            elementOffsetSlider, "value");
     }

     public function addDataItem():void {
        // Add a randomly generated value to the data provider.
        var n:Number = Math.random() * 3000;
        var o:Object = {item: n};
        items.addItem(o);
     }

     public function resetSliders():void {
        durationSlider.value = 1000;
        minimumElementDurationSlider.value = 200;
        elementOffsetSlider.value = 0;
     }
  ]]></mx:Script>

  <mx:Panel title="Column Chart with Series Interpolate Effect">
     <mx:ColumnChart id="myChart" dataProvider="{items}">
        <mx:series>
           <mx:ColumnSeries
            id="mySeries"
            yField="item"
            displayName="Quantity"
            showDataEffect="rearrangeData"
           />
        </mx:series>
     </mx:ColumnChart>
  </mx:Panel>

  <mx:Button id="b1" 
    click="addDataItem()" 
    label="Add Data Item"
  />

  <mx:Panel title="Effects">
     <mx:Form>
        <mx:FormItem label="Duration">
           <mx:HSlider id="durationSlider"
            minimum="1"
            maximum="10000"
            value="1000"
            dataTipPlacement="top"
            tickColor="black"
            snapInterval="500"
            tickInterval="500"
            labels="['0','10000']"
            allowTrackClick="true"
            liveDragging="true"
           />
        </mx:FormItem>
        <mx:FormItem label="Minimum Element Duration">
           <mx:HSlider id="minimumElementDurationSlider"
            minimum="0"
            maximum="1000"
            value="200"
            dataTipPlacement="top"
            tickColor="black"
            snapInterval="50"
            tickInterval="50"
            labels="['0','1000']"
            allowTrackClick="true"
            liveDragging="true"
           />
        </mx:FormItem>
        <mx:FormItem label="Element Offset">
           <mx:HSlider id="elementOffsetSlider"
            minimum="0"
            maximum="1000"
            value="0"
            dataTipPlacement="top"
            tickColor="black"
            snapInterval="50"
            tickInterval="50"
            labels="['0','1000']"
            allowTrackClick="true"
            liveDragging="true"
           />
        </mx:FormItem>
     </mx:Form>
  </mx:Panel>

  <mx:Button id="b2" 
    label="Reset Sliders" 
    click="resetSliders()"
  />

</mx:Application>
The executing SWF file for the previous example is shown below:

For more information about databinding in ActionScript, see Defining data bindings in ActionScript.