Removing the default drop shadow from a LineChart chart in Flex

Sree,

Try toggling the “toggle series filters” checkbox in the upper-left corner to enable/disable the drop shadow. Heh, I had to actually double-check the entry title and reread my own code. For a minute I thought I had uploaded the wrong SWF.

Peter

Reply

michael,

I think you need to set the seriesFilters property to an empty array and then manage the filters properties manually for each of the LineSeries objects.

Something like the following:

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/11/13/removing-the-default-drop-shadow-from-a-linechart-chart-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.charts.series.LineSeries;
            import mx.charts.AxisRenderer;
            import mx.charts.CategoryAxis;
            import mx.charts.LinearAxis;
            import mx.charts.LineChart;

            private var lineChart:LineChart;

            private function init():void {
                // vertical axis
                var linearAxis:LinearAxis = new LinearAxis();
                linearAxis.baseAtZero = false;
                linearAxis.title = "Price";

                // horizontal axis
                var categoryAxis:CategoryAxis = new CategoryAxis();
                categoryAxis.categoryField = "@date";
                categoryAxis.title = "Date";

                // horizontal axis renderer
                var axisRenderer:AxisRenderer = new AxisRenderer();
                axisRenderer.axis = categoryAxis;
                axisRenderer.setStyle("canDropLabels", true);

                // series 1
                var series1:LineSeries = new LineSeries();
                series1.yField = "@close";
                series1.displayName = "Close";
                series1.setStyle("form", "curve");
                series1.filters = [];
                // series 2
                var series2:LineSeries = new LineSeries();
                series2.yField = "@open";
                series2.displayName = "Open";
                series2.setStyle("form", "curve");
                series2.filters = [new GlowFilter()];

                lineChart = new LineChart();
                // lineChart.seriesFilters = [];
                lineChart.showDataTips = true;
                lineChart.dataProvider = dp;
                lineChart.percentWidth = 100;
                lineChart.percentHeight = 100;
                lineChart.verticalAxis = linearAxis;
                lineChart.horizontalAxis = categoryAxis;
                lineChart.horizontalAxisRenderers = [axisRenderer];
                lineChart.series = [series1, series2];
                addChild(lineChart);

                seriesFilterArr = lineChart.seriesFilters;
            }

            private function checkBox_click(evt:MouseEvent):void {
                var len:uint = lineChart.seriesFilters.length;
                if (len > 0) {
                    lineChart.seriesFilters = [];
                } else {
                    lineChart.seriesFilters = seriesFilterArr;
                }
            }
        ]]>
    </mx:Script>

    <mx:XMLListCollection id="dp">
        <mx:source>
            <mx:XMLList>
                <quote date="8/27/2007" open="40.38" close="40.81" />
                <quote date="8/24/2007" open="40.5" close="40.41" />
                <quote date="8/23/2007" open="40.82" close="40.6" />
                <quote date="8/22/2007" open="40.4" close="40.77" />
                <quote date="8/21/2007" open="40.41" close="40.13" />
                <quote date="8/20/2007" open="40.55" close="40.74" />
                <quote date="8/17/2007" open="40.18" close="40.32" />
                <quote date="8/16/2007" open="39.83" close="39.96" />
                <quote date="8/15/2007" open="40.22" close="40.18" />
                <quote date="8/14/2007" open="41.01" close="40.41" />
                <quote date="8/13/2007" open="41" close="40.83" />
                <quote date="8/10/2007" open="41.3" close="41.06" />
                <quote date="8/9/2007" open="39.9" close="40.75" />
                <quote date="8/8/2007" open="39.61" close="40.23" />
                <quote date="8/7/2007" open="39.08" close="39.42" />
                <quote date="8/6/2007" open="38.71" close="39.38" />
                <quote date="8/3/2007" open="39.47" close="38.75" />
                <quote date="8/2/2007" open="39.4" close="39.52" />
                <quote date="8/1/2007" open="40.29" close="39.58" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>

    <mx:Array id="seriesFilterArr" />

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="toggle series filters:"
                labelPlacement="left"
                selected="false"
                click="checkBox_click(event);" />
    </mx:ApplicationControlBar>

</mx:Application>

Hope that helps,
Peter

Reply