1 Reply Latest reply on Jun 5, 2010 9:16 AM by imock

    Highlighting a column in column chart

    imock

      I have a column chart with a datetime axis and I want to highlight the column for the current month. I'm trying to do this by changing the display properties of the item belonging to current month in the chart series. The problem is, 'chartSeries.items' returns null in the initialize() method for the chart. So, I cannot use chartSeries.getChildAt(i). The chart loads okay and I can see all the data correctly though.

      Any ideas on how I can do this will be appreciated.

       

      Here's the code I have:

       

                  public function initializeChart():void {

                    var date:Date = new Date();

                    var currMonth:Number = date.getMonth();

                    for (var i:int=0; i<salesData.length; i++) {

                    var obj:Object = salesData.getItemAt(i);

                      if (obj.month == currMonth) {

                                 //code to get chart item for this month and highlight it            

       

                             //This line throws Index out of bounds error - when I look at salesSeries, salesSeries.items is null at this point

                             var specialColumn:DisplayObject = this.salesSeries.getChildAt(i);

                           specialColumn.opaqueBackground = 0xFF0000;

                     

                    }

                    }

                  }

        • 1. Re: Highlighting a column in column chart
          imock Level 1

          In case people want to know how to do this - you can do this with 'fillFunction'. Here's the sample code:

           

                      public function myFillFunction(element:ChartItem, index:Number):IFill {

                      var item:ColumnSeriesItem = ColumnSeriesItem(element);

                      var currDate:Date = new Date();

                      if (item.xValue.month == (currDate.month+1)) return new SolidColor(0x000000);

                      return new SolidColor(0x0000DD);

                      }         

          .........

          .........

          <mx:series>

                          <mx:ColumnSeries

                           id="salesSeries"

                              xField="date"

                              yField="sales"

                              displayName="sales"

                              dataProvider="{salesData}"

                              fillFunction="myFillFunction"

                          />

                      </mx:series>