0 Replies Latest reply on Dec 27, 2007 12:55 PM by paulfeuer

    Chart flickering problem when updating members of dataProvider

    paulfeuer Level 1
      Hi all,

      I'm having an issue with a PieChart, where the dataProvider i'm using is getting updated under the hood and it's causing the labels to drop in and out. Specifically, it looks like in the updateDisplayList() method of PieSeries, there's a call to clear the "labelLayer". I could have sworn i'd seen an example of an updating pie chart that did not have a problem of flickering labels, but i can't seem to figure out how to get rid of this annoyance.

      Here is a sample application that demonstrates what i'm facing. Anyone have any ideas on how to get the labels to stick around yet display the updated values?

      Thanks,

      ./paul

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute"
      width="500" height="300" creationComplete="init()">
      <mx:Script>
      <![CDATA[
      import mx.events.CollectionEventKind;
      import mx.events.CollectionEvent;
      import flash.utils.getTimer;
      import mx.events.PropertyChangeEvent;
      import mx.formatters.NumberFormatter;
      import mx.collections.ArrayCollection;

      private var timer:Timer = new Timer(3000,1);
      private var fireUpdate:Boolean = true;
      private var ac:ArrayCollection = new ArrayCollection(
      [ { "name":"record A", "mydata": 30 },
      { "name":"record B", "mydata": 60 },
      { "name":"record C", "mydata": 70 },
      { "name":"record D", "mydata": 80 },
      { "name":"record E", "mydata": 40 },
      { "name":"record F", "mydata": 90 } ]);
      private var percentFormat:NumberFormatter = new NumberFormatter();
      private function init():void
      {
      timer.addEventListener( TimerEvent.TIMER, onTimerEvent );
      percentFormat.precision = 0;
      mychart.dataProvider = ac;
      grid.dataProvider = ac;
      pieSeries.field = "mydata";
      timer.start();
      }
      private function onTimerEvent( evt:TimerEvent ):void
      {
      for each( var r:Object in ac )
      {
      r.mydata = int(((Math.random() * 0.1) + 0.95) * Number(r.mydata)); // plus or minus 5%
      trace( getTimer() + ": " + r.name + " -> " + r.mydata );
      }
      if( fireUpdate )
      {
      var cevt:CollectionEvent = new CollectionEvent( CollectionEvent.COLLECTION_CHANGE );
      cevt.kind = CollectionEventKind.UPDATE;
      ac.dispatchEvent( cevt );
      }
      statusLabel.text = "Last Updated: " + getTimer();
      timer.reset();
      timer.start();
      }
      public function labelFunc(data:Object, field:String, index:Number, percentValue:Number):String
      {
      return data.name + " (" + percentFormat.format(percentValue) + "%)";
      }
      private function toggleUpdateEvent():void
      {
      fireUpdate = !fireUpdate;
      if( fireUpdate ) evtToggle.label = "Turn Off UpdateEvent";
      else evtToggle.label = "Turn ON UpdateEvent"
      }
      ]]>
      </mx:Script>
      <mx:VBox width="100%" height="100%" >
      <mx:HBox>
      <mx:Button id="evtToggle" label="Turn Off UpdateEvent" click="toggleUpdateEvent()" />
      <mx:Label id="statusLabel" />
      </mx:HBox>
      <mx:HBox width="100%" height="100%">
      <mx:PieChart id="mychart" width="50%" height="100%">
      <mx:series>
      <mx:PieSeries id="pieSeries" labelFunction="labelFunc"
      labelPosition="insideWithCallout" showDataEffect="eff"/>
      </mx:series>
      <mx:SeriesInterpolate id="eff" duration="1000"/>
      </mx:PieChart>
      <mx:DataGrid id="grid" width="50%" height="100%">
      <mx:columns>
      <mx:DataGridColumn dataField="name" />
      <mx:DataGridColumn dataField="mydata" />
      </mx:columns>
      </mx:DataGrid>
      </mx:HBox>
      </mx:VBox>
      </mx:Application>