Flex Examples

4 Responses to “Removing the default drop shadow from a LineChart chart in Flex”

1. 1 Sree Dec 12th, 2007 at 3:21 am

   The example that you have displayed still shows the dropShadow … is this a player bug?

2. 2 peterd Dec 12th, 2007 at 1:19 pm

   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

3. 3 michael Feb 24th, 2008 at 9:54 am

   Hi, how can the shadow be removed programmatically from a lineseries?
   I try to pass an empty array in the filters option, but does not seem
   to work..any ideas? thanks

   var s:LineSeries = new LineSeries();
   s.filters = ??

   thanks

4. 4 peterd Feb 24th, 2008 at 11:07 pm

   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

Leave a Reply