Adding effects to charts

You can add any Effect from the mx.effectspackage to the Series or Axis of a Chart. A simple rollover effect can enhance the look and feel of your chart. Here's a basic example of how to add a fade-in and fade-out effect on rollover and rollout of chart elements:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx"

               backgroundColor="0xFFFFFF">


    <s:layout><s:HorizontalLayout/></s:layout>

    <fx:Script>

        <![CDATA[


            [Bindable] public var chartDP:Array = [

                {day:'Monday',rainfall:10,elevation:100,temperature:78},

                {day:'Tuesday',rainfall:7,elevation:220,temperature:66},

                {day:'Wednesday',rainfall:5,elevation:540,temperature:55},

                {day:'Thursday',rainfall:8,elevation:60,temperature:84},

                {day:'Friday',rainfall:11,elevation:390,temperature:52},

                {day:'Saturday',rainfall:12,elevation:790,temperature:45},

                {day:'Sunday',rainfall:14,elevation:1220,temperature:24}

            ];


        ]]>

    </fx:Script>

    <mx:AreaChart dataProvider="{chartDP}" >

        <mx:horizontalAxis>

            <mx:CategoryAxis dataProvider="{chartDP}"

                             categoryField="day" />

        </mx:horizontalAxis>

        <mx:series>

            <mx:AreaSeries alpha=".5"

                           yField="rainfall"

                           displayName="rainfall">

Here, a Fade effect is set for the rollover and rollout of the AreaSeries; these effects will affect only this particular series, not the chart as a whole:

<mx:rollOverEffect>

                    <s:Fade alphaFrom=".5" alphaTo="1" duration="500" />

                </mx:rollOverEffect>

                <mx:rollOutEffect>

                    <s:Fade alphaFrom="1" alphaTo=".5" duration="500" />

                </mx:rollOutEffect>

            </mx:AreaSeries>

        </mx:series>

    </mx:AreaChart>

</s:Application>

To add a little more action to your chart, you can use SeriesInterpolate, SeriesZoom, and SeriesSlide to animate changing data. SeriesInterpolate animates the data points moving from their old positions to their new positions. SeriesZoom shrinks the old data to nothing and grows the new data from nothing. SeriesSlide slides out the old data and slides in the new data. These effects are typically assigned to the showDataEffect and hideDataEffect event attributes of a series object. SeriesInterpolate can be assigned to only the showDataEffect event attribute and has no effect when assigned to the hideDataEffect event attribute.

This example shows a slide effect that can be used when switching a chart between two data sets. To see SeriesZoom in action, add comment tags around the other effects and remove the comment tags from around the SeriesZoom effect. To see how SeriesInterpolate works, comment out the other effects, comment in the SeriesInterpolate effect, and remove the hideDataEffect property from the ColumnSeries tag:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/halo"

               minWidth="1024" minHeight="768">

    <fx:Declarations>

        <mx:SeriesSlide id="dataIn" duration="500" direction="up"/>

        <mx:SeriesSlide id="dataOut" duration="500" direction="up"/>

<!--    <mx:SeriesZoom id="dataOut" duration="500"/>

        <mx:SeriesInterpolate id="dataIn" duration="1000"/> -->

    </fx:Declarations>


    <s:layout><s:HorizontalLayout/></s:layout>

    <fx:Script>

        <![CDATA[

            [Bindable] public var chartDP1:Array = [

                {day:'Monday',rainfall:10,elevation:100,temperature:78},

                {day:'Tuesday',rainfall:7,elevation:220,temperature:66},

                {day:'Wednesday',rainfall:5,elevation:540,temperature:55},

                {day:'Thursday',rainfall:8,elevation:60,temperature:84},

                {day:'Friday',rainfall:11,elevation:390,temperature:52},

                {day:'Saturday',rainfall:12,elevation:790,temperature:45},

                {day:'Sunday',rainfall:14,elevation:1220,temperature:24}

            ];


            [Bindable] public var chartDP2:Array = [

                {day:'Sunday',rainfall:10,elevation:100,temperature:78},

                {day:'Saturday',rainfall:7,elevation:220,temperature:66},

                {day:'Friday',rainfall:5,elevation:540,temperature:55},

                {day:'Thursday',rainfall:8,elevation:60,temperature:84},

                {day:'Wednesday',rainfall:11,elevation:390,temperature:52},

                {day:'Tuesday',rainfall:12,elevation:790,temperature:45},

                {day:'Monday',rainfall:14,elevation:1220,temperature:24}

            ];

        ]]>

    </fx:Script>

    <mx:BarChart id="rainfallChart" dataProvider="{chartDP1}" >

        <mx:horizontalAxis>

            <mx:CategoryAxis dataProvider="{chartDP1}"

                             categoryField="day" />

        </mx:horizontalAxis>

        <mx:series>

            <mx:ColumnSeries yField="rainfall" xField="day"

                             displayName="rainfall"

                             showDataEffect="{dataIn}"

                             hideDataEffect="{dataOut}" />

        </mx:series>

    </mx:BarChart>


    <s:HGroup>

        <mx:RadioButton groupName="dataProvider" label="Data Provider 1"

                        selected="true"

                        click="rainfallChart.dataProvider=chartDP1;"/>

        <mx:RadioButton groupName="dataProvider" label="Data Provider 2"

                        click="rainfallChart.dataProvider=chartDP2;"/>

    </s:HGroup>


</s:Application>

This recipe was originally contributed by Joshua Noble as part of O'Reilly's Flex 4 Cookbook.