Using filters with chart controls
You can add filters such as drop shadows to your charts by using the classes in the flash.filters package. These filters include:
- BevelFilter
- BitmapFilter
- BlurFilter
- ColorMatrixFilter
- DisplacementMapFilter
- DropShadowFilter
- GlowFilter
- GradientBevelFilter
- GradientGlowFilter
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:
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 -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:flash="flash.filters.*">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:2000, Expenses:1500},
{Month:"Feb", Profit:1000, Expenses:200},
{Month:"Mar", Profit:1500, Expenses:500}
]);
]]></mx:Script>
<mx:Panel title="ColumnChart with drop shadow example">
<mx:ColumnChart id="column" dataProvider="{expenses}" showDataTips="true">
<!-- Add a custom drop shadow filter to the ColumnChart control. -->
<mx:filters>
<mx:DropShadowFilter
distance="10"
color="0x666666"
alpha=".8"
/>
</mx:filters>
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
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}"/>
</mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:
For more information on using filters, see Using filters in Flex.
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 -->
<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", Profit:2000, Expenses:1500, Amount:450},
{Month:"Feb", Profit:1000, Expenses:200, Amount:600},
{Month:"Mar", Profit:1500, Expenses:500, Amount:300}
]);
]]></mx:Script>
<mx:LineChart id="myChart" dataProvider="{expenses}" showDataTips="true">
<mx:seriesFilters>
<mx: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>
</mx: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 -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:flash=
"flash.filters.*">
<mx:Script>
<![CDATA[
[Bindable]
public var expenses:Object = [
{Expense:"Taxes", Amount:2000},
{Expense:"Gas", Amount:100},
{Expense:"Food", Amount:200}
];
]]>
</mx:Script>
<mx:Panel title="Pie Chart">
<mx:PieChart id="pie"
dataProvider="{expenses}"
showDataTips="true"
>
<!-- Add a custom drop shadow to the PieChart control -->
<mx:filters>
<flash:DropShadowFilter
distance="10"
color="0x666666"
alpha=".8"
/>
</mx:filters>
<mx:series>
<mx:Array>
<mx:PieSeries field="Amount" nameField="Expense"
labelPosition="callout" explodeRadius=".2">
<!-- Clear default shadow on the PieSeries -->
<mx:filters>
<mx:Array/>
</mx:filters>
</mx:PieSeries>
</mx:Array>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{pie}"/>
</mx:Panel>
</mx: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 -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:flash=
"flash.filters.*" creationComplete="createFilters()">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"Jan", Profit:2000, Expenses:1500},
{Month:"Feb", Profit:1000, Expenses:200},
{Month:"Mar", Profit:1500, Expenses:500}
]);
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();
}
]]></mx:Script>
<mx:Panel title="Applying Multiple Filters">
<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
<mx:backgroundElements>
<mx:GridLines id="myGridlines"
horizontalChangeCount="1"
verticalChangeCount="1"
direction="both"
/>
</mx:backgroundElements>
<mx:horizontalAxis>
<mx:CategoryAxis
id="a1"
dataProvider="{expenses}"
categoryField="Month"
/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer
id="myAxisRenderer"
placement="bottom"
canDropLabels="true"
axis="{a1}"
>
<mx:axisStroke>
<mx:Stroke color="#000080" weight="10"/>
</mx:axisStroke>
<mx:tickStroke>
<mx:Stroke color="#000060" weight="5"/>
</mx:tickStroke>
<mx:minorTickStroke>
<mx:Stroke 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}"/>
</mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below: