Three effects are unique to charting: SeriesInterpolate, SeriesSlide, and SeriesZoom. You use these effects on a data series to achieve an effect when the data in that series changes. These effects can have a great deal of visual impact. Data series do not support other Flex effects.

The following example shows the SeriesSlide effect making the data slide in and out of a screen when the data changes. You can trigger changes to data in a chart series in many ways. Most commonly, you trigger an effect when the data provider changes for a chart control. In the following example, when the user clicks the button, the chart control's data provider changes, triggering the effect:

<?xml version="1.0"?>
<!-- charts/BasicSeriesSlideEffect.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script><![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]
        public var expenses1:ArrayCollection = new ArrayCollection([
            {Month:"Jan", Income:2000, Expenses:1500},
            {Month:"Feb", Income:1000, Expenses:200},
            {Month:"Mar", Income:1500, Expenses:500}
        ]);

        [Bindable]
        public var expenses2:ArrayCollection = new ArrayCollection([
            {Month:"Jan", Income:1200, Expenses:800},
            {Month:"Feb", Income:2500, Expenses:300},
            {Month:"Mar", Income:575, Expenses:490}
        ]);

        public var year:int = 1;

        public function changeProvider():void {
            if (year == 2) {
                myChart.dataProvider=expenses1;
                b1.label="View Second Year Data";
                lbl.text="First Year Data";
                year=1;
            } else {
                myChart.dataProvider=expenses2;
                lbl.text="Second Year Data";
                b1.label="View First Year Data";            
                year=2;
            }
        }
    ]]></mx:Script>

    <!-- Define chart effects -->
    <mx:SeriesSlide 
        id="slideIn" 
        duration="1000" 
        direction="up"
    />
    <mx:SeriesSlide 
        id="slideOut" 
        duration="1000" 
        direction="down"
    />

    <mx:Panel title="Column Chart with Basic Series Slide Effect" 
    layout="absolute" height="493">
        <mx:Label id="lbl" 
            text="First Year Data" 
            width="233.5" 
            height="44" 
            fontSize="24" 
            color="#091D96" 
            top="5" 
            right="10"
        />
        <mx:ColumnChart id="myChart" dataProvider="{expenses1}">
            <mx:horizontalAxis>
                <mx:CategoryAxis 
                    dataProvider="{expenses1}" 
                    categoryField="Month"
                />
            </mx:horizontalAxis>

            <mx:verticalAxis>
                <mx:LinearAxis minimum="0" maximum="3000"/>
            </mx:verticalAxis>

            <mx:series>
                <mx:ColumnSeries
                    xField="Month"
                    yField="Income"
                    displayName="Income"
                    showDataEffect="slideIn"
                    hideDataEffect="slideOut"
                />
                <mx:ColumnSeries
                    xField="Month"
                    yField="Expenses"
                    displayName="Expenses"
                    showDataEffect="slideIn"
                    hideDataEffect="slideOut"
                />
            </mx:series>
        </mx:ColumnChart>
        <mx:Legend dataProvider="{myChart}" bottom="0"/>
    </mx:Panel>
    <mx:Button id="b1" click="changeProvider()" label="View Second Year Data"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

This example explicitly defines the minimum and maximum values of the vertical axis. If not, Flex would recalculate these values when the new data provider was applied. The result would be a change in the axis labels during the effect.

Changing a data provider first triggers the hideDataEffect effect on the original data provider, which causes that data provider to "slide out," and then triggers the showDataEffect effect on the new data provider, which causes that data provider to "slide in."

Another trigger of data effects is when a new data point is added to a series. The following example triggers the showDataEffect when the user clicks the button and adds a new item to the series' data provider:

<?xml version="1.0"?>
<!-- charts/AddItemEffect.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <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 id="slideIn" 
        duration="1000" 
        direction="up"
    />
    
    <mx:Panel title="Column Chart with Series Effect">
        <mx:ColumnChart id="myChart" dataProvider="{items}">        
            <mx:series>
                <mx:ColumnSeries 
                    yField="item" 
                    displayName="Quantity" 
                    showDataEffect="slideIn" 
                />
            </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:

For more information about changing charting data at run time, see Changing chart data at run time.

The charting effects have several properties in common that traditional effects do not have. All of these properties are optional. The following table lists the common properties of the charting effects:

Using the SeriesSlide effect

The SeriesSlide effect slides a data series into and out of the chart's boundaries. The SeriesSlide effect takes a direction property that defines the location from which the series slides. Valid values of direction are left, right, up, or down.

If you use the SeriesSlide effect with a hideDataEffect trigger, the series slides from the current position on the screen to a position off the screen, in the direction indicated by the direction property. If you use SeriesSlide with a showDataEffect trigger, the series slides from off the screen to a position on the screen, in the indicated direction.

When you use the SeriesSlide effect, the entire data series disappears from the chart when the effect begins. The data then reappears based on the nature of the effect. To keep the data on the screen at all times during the effect, you can use the SeriesInterpolate effect. For more information, see Using the SeriesInterpolate effect.

The following example creates an effect called slideDown. Each element starts its slide 30 milliseconds after the element before it, and takes at least 20 milliseconds to complete its slide. The entire effect takes at least 1 second (1000 milliseconds) to slide the data series down. Flex invokes the effect when it clears old data from the chart and when new data appears.

<?xml version="1.0"?>
<!-- charts/CustomSeriesSlideEffect.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <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"
            showDataEffect="slideDown"
            hideDataEffect="slideDown"
           />
        </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:

Using the SeriesZoom effect

The SeriesZoom effect implodes and explodes chart data into and out of the focal point that you specify. As with the SeriesSlide effect, whether the effect is zooming to or from this point depends on whether it's used with a showDataEffect or hideDataEffect trigger.

The SeriesZoom effect can take several properties that define how the effect acts. The following table describes these properties:

The following example zooms in the data series from the upper-right corner of the chart. While zooming in, Flex displays the last element in the series first because the elementOffset value is negative.

<?xml version="1.0"?>
<!-- charts/SeriesZoomEffect.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <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 effects --> 
  <mx:SeriesZoom id="zoomOut" 
     duration="2000" 
     minimumElementDuration="50"
     elementOffset="50" 
     verticalFocus="top" 
     horizontalFocus="left"
     relativeTo="chart"
  />
  <mx:SeriesZoom id="zoomIn" 
     duration="2000" 
     minimumElementDuration="50" 
     elementOffset="-50" 
     verticalFocus="top" 
     horizontalFocus="right"
     relativeTo="chart"
  />
  
  <mx:Panel title="Column Chart with Series Zoom Effect">
     <mx:ColumnChart id="myChart" dataProvider="{items}">
        <mx:series>
           <mx:ColumnSeries 
            yField="item" 
            displayName="Quantity" 
            showDataEffect="zoomIn"
            hideDataEffect="zoomOut"
           />
        </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 use the SeriesZoom effect, the entire data series disappears from the chart when the effect begins. The data then reappears based on the nature of the effect. To have the data stay on the screen at all times during the effect, you can use the SeriesInterpolate effect. For more information, see Using the SeriesInterpolate effect.

Using the SeriesInterpolate effect

The SeriesInterpolate effect moves the graphics that represent the existing data in the series to the new points. Instead of clearing the chart and then repopulating it as with SeriesZoom and SeriesSlide, this effect keeps the data on the screen at all times.

You use the SeriesInterpolate effect only with the showDataEffect effect trigger. It has no effect if set with a hideDataEffect trigger.

The following example sets the elementOffset property of SeriesInterpolate to 0. As a result, all elements move to their new locations without disappearing from the screen.

<?xml version="1.0"?>
<!-- charts/SeriesInterpolateEffect.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <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:SeriesInterpolate id="rearrangeData" 
     duration="1000" 
     minimumElementDuration="200" 
     elementOffset="0"
  />
  
  <mx:Panel title="Column Chart with Series Interpolate Effect">
     <mx:ColumnChart id="myChart" dataProvider="{items}">
        <mx:series>
           <mx:ColumnSeries 
            yField="item" 
            displayName="Quantity" 
            showDataEffect="rearrangeData"
           />
        </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: