0 Replies Latest reply on Jun 5, 2010 9:20 PM by pcstarsean01

    ColumnSet with dataFunction in ColumnSeries lead to a bug when series removed ?

    pcstarsean01

      Hi, I use Flex ColumnChart and set ColumnSeries in ColumnSet with dataFunction. The function I need is to change series by user interaction, so I refer to the example in stacked chart document, then add a button to pop series from myChart.series (actually I get a array = myChart.series, pop the series, and assign myChart.series = array).

       

      However, when I click this button, the last series is removed, but the ColumnSet series which set dataFunction also disappeared. Another ColumnSet that I directly set "yField" work well. I have checked that the "series.item" has been replaced to a null array. It's a strange condition.

       

      There is source code below, may anyone can fix it? Or it's a bug of ColumnSet in Flex? Thanks a lot.


      <?xml version="1.0"?>
      <!-- charts/UsingBarSets.mxml -->
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
       
      <mx:Script><![CDATA[
          import mx.controls.Button;
          import mx.charts.series.ColumnSeries;
          import mx.charts.series.ColumnSet;
          import mx.charts.LinearAxis;
          import mx.charts.CategoryAxis;
          import mx.charts.ColumnChart;
          import mx.charts.chartClasses.AxisBase;
          import mx.charts.chartClasses.Series;
          import mx.charts.chartClasses.IAxis;
          import mx.charts.series.LineSeries;
          import mx.charts.AxisRenderer;
           import mx.charts.Legend;
           import mx.charts.BarChart;
           import mx.charts.series.BarSet;
           import mx.charts.series.BarSeries;
           import mx.collections.ArrayCollection;

           public var c:ColumnChart = new ColumnChart();

           [Bindable]
           private var yearlyData:ArrayCollection = new ArrayCollection([
              {month:"January", revenue:120, costs:45,
                  overhead:102, oneTime:23},
              {month:"February", revenue:108, costs:42,
                  overhead:87, oneTime:47},
              {month:"March", revenue:150, costs:82,
                  overhead:32, oneTime:21},
              {month:"April", revenue:170, costs:44,
                  overhead:68},
              {month:"May", revenue:250, costs:57,
                  overhead:77, oneTime:17},
              {month:"June", revenue:200, costs:33,
                  overhead:51, oneTime:30},
              {month:"July", revenue:145, costs:80,
                  overhead:62, oneTime:18},
              {month:"August", revenue:166, costs:87,
                  overhead:48},
              {month:"September", revenue:103, costs:56,
                  overhead:42},
              {month:"October", revenue:140, costs:91,
                  overhead:45, oneTime:60},
              {month:"November", revenue:100, costs:42,
                  overhead:33, oneTime:67},
              {month:"December", revenue:182, costs:56,
                  overhead:25, oneTime:48},
              {month:"May", revenue:120, costs:57,
                  overhead:30}
           ]);

           private function initApp():void {

              c.dataProvider = yearlyData;
              c.showDataTips = true;

              var hAxis:CategoryAxis = new CategoryAxis();
              hAxis.categoryField = "month";  
              var hRender:AxisRenderer = new AxisRenderer();
              hRender.axis = hAxis as IAxis;
              hRender.visible = true;
              hRender.placement = "bottom";

              var xRenderArray:Array = new Array();
              xRenderArray.push(hRender);

              var vAxis:LinearAxis = new LinearAxis();
              var vRender:AxisRenderer = new AxisRenderer();
              vRender.axis = vAxis;
              vRender.placement = "left";

              var mySeries:Array = new Array();

              var outerSet:ColumnSet = new ColumnSet();
              outerSet.type = "clustered";
              var series1:ColumnSeries = new ColumnSeries();
              series1.dataFunction = mySeriesDataFunction;
              series1.displayName = "Revenue";
              series1.horizontalAxis = hAxis;
              series1.verticalAxis = vAxis;
              outerSet.series = [series1];

              var innerSet:ColumnSet = new ColumnSet();
              innerSet.type = "stacked";
              var series2:ColumnSeries = new ColumnSeries();
              var series3:ColumnSeries = new ColumnSeries();
              series2.yField = "costs";
              series2.displayName = "Recurring Costs";
              series2.horizontalAxis = hAxis;
              series2.verticalAxis = vAxis;       
              series3.yField = "oneTime";
              series3.displayName = "One-Time Costs";
              series3.horizontalAxis = hAxis;
              series3.verticalAxis = vAxis;
              mySeries.push(series2);
              mySeries.push(series3);      
              innerSet.series = mySeries;

              var ls:LineSeries = new LineSeries();
              ls.yField = "costs";
              ls.displayName = "Cost2";
              ls.horizontalAxis = hAxis;
              ls.verticalAxis = vAxis;       

              c.series = [outerSet, innerSet, ls];
              c.horizontalAxisRenderers = xRenderArray;
              c.verticalAxisRenderers = [vRender];


              var l:Legend = new Legend();
              l.dataProvider = c;

              var b:Button = new Button();
              b.label = "popseries";
              b.addEventListener(MouseEvent.CLICK,
                  function ():void{
                      var series:Array = c.series;
                      series.pop();
                      c.series = null;
                      c.series = series;     
                  }
              );

              panel2.addChild(c);
              panel2.addChild(l);
              panel2.addChild(b);
           }

          private function mySeriesDataFunction(series:Series, item:Object, fieldName:String):Object{
              var obj:Object;

              if(fieldName == "yValue"){
                  obj = item["revenue"];
              }else if(fieldName == "xValue"){
                  obj = item["month"];
              }else{
                  obj = null;
              }

              return obj;
          }

        ]]>
      </mx:Script>

       
      <mx:Panel title="Mixed Sets Chart Created in ActionScript" id="panel2">
       
      </mx:Panel>
      </mx:Application>