1 Reply Latest reply on Nov 15, 2007 1:37 AM by

    Problem setting fill-color in an ItemRenderer

      Hi,
      I'm trying to visualize some data, using a BarChart with a horizontal DateTimeAxis as a kind of time-line. In a custom-renderer I set e.g. a label and a fill-color for the bar-segment. If you copy and start the following example-application you can use the two buttons to "scroll" through the data. You can see that the labels stay in order (A-L), but the sequence of background-colors gets messed up after some "moves" to the left and to the right.
      I tried to replace the control of the visible "window" on the time-line with a filter-function (on ArrayCollection coll) instead of controlling it throught the minimum- and maximum-attributes of the DateTimeAxis - but the strange behaviour didn't change. Setting the fill-color in updateDisplayList() didn't have an effect either.

      I guess there is something wrong in the way I use the ItemRenderer, but I don't know where.

      I'd be really glad if someone can provide help on this problem.

      TIA

      Uwe

      The files:




      FillProblemMinExample.mxml:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
      <mx:Script>
      <![CDATA[
      import mx.collections.ArrayCollection;
      [Bindable] private var coll:ArrayCollection = new ArrayCollection([
      {fromD:new Date("Aug 1 2007 00:00:00"), toD:new Date("Aug 1 2007 00:59:00"), col:0x0000FF, label:"A", val:1},
      {fromD:new Date("Aug 1 2007 01:00:00"), toD:new Date("Aug 1 2007 01:59:00"), col:0x00FF00, label:"B", val:1},
      {fromD:new Date("Aug 1 2007 02:00:00"), toD:new Date("Aug 1 2007 02:59:00"), col:0xFF0000, label:"C", val:1},
      {fromD:new Date("Aug 1 2007 03:00:00"), toD:new Date("Aug 1 2007 03:59:00"), col:0x0000FF, label:"D", val:1},
      {fromD:new Date("Aug 1 2007 04:00:00"), toD:new Date("Aug 1 2007 04:59:00"), col:0x00FF00, label:"E", val:1},
      {fromD:new Date("Aug 1 2007 05:00:00"), toD:new Date("Aug 1 2007 05:59:00"), col:0xFF0000, label:"F", val:1},
      {fromD:new Date("Aug 1 2007 06:00:00"), toD:new Date("Aug 1 2007 06:59:00"), col:0x0000FF, label:"G", val:1},
      {fromD:new Date("Aug 1 2007 07:00:00"), toD:new Date("Aug 1 2007 07:59:00"), col:0x00FF00, label:"H", val:1},
      {fromD:new Date("Aug 1 2007 08:00:00"), toD:new Date("Aug 1 2007 08:59:00"), col:0xFF0000, label:"I", val:1},
      {fromD:new Date("Aug 1 2007 09:00:00"), toD:new Date("Aug 1 2007 09:59:00"), col:0x0000FF, label:"J", val:1},
      {fromD:new Date("Aug 1 2007 10:00:00"), toD:new Date("Aug 1 2007 10:59:00"), col:0x00FF00, label:"K", val:1},
      {fromD:new Date("Aug 1 2007 11:00:00"), toD:new Date("Aug 1 2007 11:59:00"), col:0xFF0000, label:"L", val:1}
      ]);
      [Bindable] private var minDate:Date = new Date("Aug 1 2007 04:00:00");
      [Bindable] private var maxDate:Date = new Date("Aug 1 2007 10:00:00");
      private function prevClicked() : void {
      if (minDate.getHours() > 0) {
      minDate = new Date(minDate.getTime() - 3600*1000);
      maxDate = new Date(maxDate.getTime() - 3600*1000);
      }
      }
      private function nextClicked() : void {
      if (minDate.getHours() < 6) {
      minDate = new Date(minDate.getTime() + 3600*1000);
      maxDate = new Date(maxDate.getTime() + 3600*1000);
      }
      }
      ]]>
      </mx:Script>
      <mx:Panel layout="absolute" bottom="10" top="10" left="10" right="10" title="Something is wrong in ... this UI">
      <mx:BarChart id="barchart" dataProvider="{coll}" height="130" top="10" left="10" right="10">
      <mx:horizontalAxis>
      <mx:DateTimeAxis dataUnits="hours" maximum="{maxDate}" minimum="{minDate}" displayLocalTime="true"/>
      </mx:horizontalAxis>
      <mx:verticalAxis>
      <mx:LinearAxis interval="1" minimum="0.5" maximum="1.5"/>
      </mx:verticalAxis>
      <mx:series>
      <mx:BarSeries displayName="Series 1"
      itemRenderer="ColoredBarChartRenderer"
      yField="val" xField="toD" minField="fromD"/>
      </mx:series>
      </mx:BarChart>
      <mx:Button x="10" y="148" label="prev" click="prevClicked()"/>
      <mx:Button y="148" label="next" click="nextClicked()" right="10"/>
      </mx:Panel>
      </mx:Application>




      ColoredBarChartRenderer.as:

      package
      {
      import mx.core.IDataRenderer;
      import mx.core.UIComponent;
      import mx.controls.Label;
      import mx.charts.ChartItem;
      import mx.charts.series.items.BarSeriesItem;
      import flash.geom.Rectangle;
      import flash.display.Graphics;
      public class ColoredBarChartRenderer extends UIComponent implements IDataRenderer
      {
      private static const DEFAULT_FILL_COLOR:uint = 0xCCCCCC;
      private var _fillColor:uint;
      private var _label:Label;
      public function ColoredBarChartRenderer()
      {
      super();
      _label = new Label();
      addChild(_label);
      }
      private var _chartItem:ChartItem;
      public function get data():Object
      {
      return _chartItem;
      }
      public function set data(value:Object):void
      {
      if (_chartItem == value) {
      return
      }
      _chartItem = ChartItem(value);
      if (_chartItem != null) {
      _fillColor = _chartItem.item.col;
      _label.text = _chartItem.item.label;
      }
      else {
      _fillColor = DEFAULT_FILL_COLOR;
      }
      }
      override protected function updateDisplayList(unscaledWidth:Number,
      unscaledHeight:Number) : void {
      super.updateDisplayList(unscaledWidth, unscaledHeight);
      var rc:Rectangle = new Rectangle(0, 0, width, height);
      var g:Graphics = graphics;
      g.clear();
      g.moveTo(rc.left, rc.top);
      g.beginFill(_fillColor);
      g.lineTo(rc.right, rc.top);
      g.lineTo(rc.right, rc.bottom);
      g.lineTo(rc.left, rc.bottom);
      g.lineTo(rc.left, rc.top);
      g.endFill();
      _label.setActualSize(_label.getExplicitOrMeasuredWidth(), _label.getExplicitOrMeasuredHeight());
      _label.move(unscaledWidth/2 - _label.getExplicitOrMeasuredWidth()/2,
      unscaledHeight/2 - _label.getExplicitOrMeasuredHeight()/2);
      }
      }
      }

      P.S. Windows XP, FlexBuilder 2.0.1, Flash Player 9.0.28.0