Using filters with chart controls

You can add filters such as drop shadows to your chart elements by using the classes in the spark.filters.* package. These filters include:

You can apply filters to the chart control itself, or to each chart series. When you apply a filter to a chart control, the filter is applied to all aspects of that chart control, including gridlines, axis labels, and each data point in the series. The following image shows a drop shadow filter applied to a ColumnChart control:

A drop shadow filter applied to a ColumnChart control.

You wrap the filter class in an <mx:filters> or <s:filters> tag to define the array of filters applied to that control. If the control is an MX control, you use the <mx:filters> tag. If the control is a Spark control, you use the <s:filters> tag. In the case of charting components, you use the <mx:filters> tag because the charts are in the MX component set. At compile time, the MX filters are mapped to the Spark filters.

The following example applies a custom drop shadow filter to a ColumnChart control. The result is that every element, including the grid lines, axis labels, and columns, has a background shadow.

<?xml version="1.0"?>
<!-- charts/ColumnWithDropShadow.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600">
     
    <fx:Declarations>
         <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
         <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
         <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="ColumnChart with drop shadow example">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
     <mx:ColumnChart id="column" dataProvider="{srv.lastResult.data.result}" showDataTips="true">
        <!-- Add a custom drop shadow filter to the ColumnChart control. -->
        <mx:filters>
           <s:DropShadowFilter 
                distance="10" 
                color="0x666666"
                alpha=".8"/>
        </mx:filters>
        <mx:horizontalAxis>
           <mx:CategoryAxis categoryField="month"/>
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries 
                xField="month" 
                yField="profit"
                displayName="Profit"/>
           <mx:ColumnSeries 
                xField="month" 
                yField="expenses"
                displayName="Expenses"/>
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{column}"/>
  </s:Panel>
</s:Application>

The executing SWF file for the previous example is shown below:

For more information on filters, see Using filters.

Adding a drop shadow filter to some chart controls can have unexpected consequences. For example, if you add a drop shadow filter to a PieChart control, Flex renders that drop shadow filter in addition to the default drop shadow filter on the PieSeries.

You can remove filters by setting the filters Array to an empty Array, as the following example shows:

<?xml version="1.0"?>
<!-- charts/ClearFilters.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    height="600">
  
  <fx:Script><![CDATA[
      import mx.collections.ArrayCollection;
      [Bindable]
      public var expenses:ArrayCollection = new ArrayCollection([
         {Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
         {Month:"Feb", Profit:1000, Expenses:200, Amount:600},
         {Month:"Mar", Profit:1500, Expenses:500, Amount:300}
      ]);
  ]]></fx:Script>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel id="p1" title="Line chart with no filters">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
      <mx:LineChart id="myChart" 
        dataProvider="{expenses}" 
        showDataTips="true">
         
         <!-- Clear the filters array. -->
         <mx:seriesFilters>
            <fx:Array/>
         </mx:seriesFilters>

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

         <mx:series>
            <mx:LineSeries 
                yField="Profit" 
                displayName="Profit"/>
            <mx:LineSeries 
                yField="Expenses" 
                displayName="Expenses"/>
            <mx:LineSeries 
                yField="Amount" 
                displayName="Amount"/>
         </mx:series>
      </mx:LineChart>
  </s:Panel>
</s:Application>

The executing SWF file for the previous example is shown below:

The following example creates a PieChart control and applies a drop shadow to it; it also removes the default drop shadow filter from the PieSeries so that there is a single drop shadow:

<?xml version="1.0"?>
<!-- charts/PieChartShadow.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600">

    <fx:Declarations>
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
        <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/budget-xml.aspx"/>
        <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/budget.aspx -->  
    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="Pie Chart">
     <s:layout>
         <s:VerticalLayout/>
     </s:layout>
     <mx:PieChart id="pie" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true">
        <!-- Add a custom drop shadow to the PieChart control -->
        <mx:filters>
           <s:DropShadowFilter
                distance="10"
                color="0x666666"
                alpha=".8"/>
        </mx:filters>
        <mx:series>
           <fx:Array>
                <mx:PieSeries field="amount" nameField="item"
                labelPosition="callout" explodeRadius=".2">
                    <!-- Clear default shadow on the PieSeries -->
                    <mx:filters>
                        <fx:Array/>
                    </mx:filters>
                </mx:PieSeries>
           </fx:Array>
        </mx:series>
     </mx:PieChart>
     <mx:Legend dataProvider="{pie}"/>
  </s:Panel>
</s:Application>

The executing SWF file for the previous example is shown below:

You can add filters to individual chart elements that are display objects, such as series, grid lines, legend items, and axes. The following example defines set of filters, and then applies them to various chart elements:

<?xml version="1.0"?>
<!-- charts/MultipleFilters.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send();createFilters();"
    height="600">
     
    <fx:Declarations>
         <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
         <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
         <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
    </fx:Declarations>

  <fx:Script><![CDATA[
     import spark.filters.*;
     import flash.filters.BitmapFilterType;
     import flash.filters.BitmapFilterQuality;
  
     private var myBlurFilter:BlurFilter;
     private var myGlowFilter:GlowFilter;
     private var myBevelFilter:BevelFilter;
     private var myDropShadowFilter:DropShadowFilter;

     private var color:Number = 0xFF33FF;

     public function applyFilters():void {
        // Apply filters to series, grid lines, legend, and axis.
        myGridlines.filters = [myBlurFilter];
        myLegend.filters = [myGlowFilter];
        myAxisRenderer.filters = [myBevelFilter];
        s1.filters = [myDropShadowFilter];
        s2.filters = [myDropShadowFilter];
     }

     public function createFilters():void {
        // Define filters.
        myBlurFilter = new BlurFilter(4,4,1);

        myGlowFilter = new GlowFilter(color, .8, 6, 6, 
            2, 1, false, false);

        myDropShadowFilter = new DropShadowFilter(15, 45, 
            color, 0.8, 8, 8, 0.65, 1, false, false);

        myBevelFilter = new BevelFilter(5, 45, color, 0.8, 
            0x333333, 0.8, 5, 5, 1, BitmapFilterQuality.HIGH,               
            BitmapFilterType.INNER, false);

        applyFilters();
     }
  ]]></fx:Script>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="Applying Multiple Filters">
     <s:layout>
         <s:VerticalLayout/>
     </s:layout>
     <mx:ColumnChart id="myChart" 
        dataProvider="{srv.lastResult.data.result}" 
        showDataTips="true">
        <mx:backgroundElements>
            <mx:GridLines id="myGridlines" 
                horizontalChangeCount="1"
                verticalChangeCount="1"
                gridDirection="both"/>
        </mx:backgroundElements>
        
        <mx:horizontalAxis>
            <mx:CategoryAxis id="a1" categoryField="month"/>
        </mx:horizontalAxis>

        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer 
                id="myAxisRenderer" 
                placement="bottom"
                canDropLabels="true"
                axis="{a1}">
                <mx:axisStroke>
                    <mx:SolidColorStroke color="#000080" weight="10"/>
                </mx:axisStroke>
                <mx:tickStroke>
                    <mx:SolidColorStroke color="#000060" weight="5"/>
                </mx:tickStroke>
                <mx:minorTickStroke>
                    <mx:SolidColorStroke color="#100040" weight="5"/>
                </mx:minorTickStroke>
            </mx:AxisRenderer>
        </mx:horizontalAxisRenderers>

        <mx:series>
           <mx:ColumnSeries id="s1" 
                xField="month" 
                yField="profit"
                displayName="Profit"/>
           <mx:ColumnSeries id="s2" 
                xField="month" 
                yField="expenses" 
                displayName="Expenses"/>
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend id="myLegend" dataProvider="{myChart}"/>
  </s:Panel>
</s:Application>

The executing SWF file for the previous example is shown below: