Question

I’m missing something fundamental about charting in Flex. I’m creating a custom chart component that includes an autoscale function, which modifies the chart’s x-axis and y-axis limits, and provides a new data series for the chart. The custom chart component looks like:

<s:Group ...>
   ...
   private function autoScale():void {
       ...
       // this is where I compute newXmin, newXmax, newYmin, newYmax, startIndex, endIndex
       ...
       haxis.minimum = newXmin;
       haxis.maximum = newXmax;
       vaxis.minimum = newYmin;
       vaxis.maximum = newYmax;
       myChart.series.dataProvider = myData.slice(startIndex, endIndex+1);
   }
   ...
   <mx:LineChart id="myChart">

       <mx:horizontalAxis>
           <charts:MyAxis id="haxis" labelFunction="setXLabels()"/>
       </mx:horizontalAxis>

       <mx:verticalAxis>
           <mx:LinearAxis id="vaxis" labelFunction="setYLabels()"/>
       </mx:verticalAxis>

   </mx:LineChart>
   ...
</s:Group>

At any time, the user may zoom in/out (code not shown), which calls the autoScale() function.

My thinking, correct me if I’m wrong, is that the above program re-draws the chart FIVE times (once for each line of code shown in function autoScale(). Is it possible to tell Flex to ignore re-drawing changes to the component until I issue some specific command that says, “OK, now I’ve set everything I need to — go ahead and redraw the chart”?

I’ve been reading about invalidateDisplayList, but haven’t been able to figure out if this is the intended application for it, and if so, how to apply it here. I’ve only ever seen invalidateDisplayList applied to custom components in the set and get functions used to pass data in/out of the custom component (see here, for example). In my example above, the properties I’m discussing are all set inside the custom component (e.g. in the autoScale() function). Not sure if that makes a difference.

Any advice appreciated.

Answer 1

Flex’s component lifecycle would prevent chart being redrawn 5 times because the properties are modified 5 times with in the statements as you described, that’s the beauty of the lifecycle.

In short, most properties change don’t right away translate to drawing, but instead a flag is raised indicating that property has changed, such process is called invalidation. The component would then wait until the next redraw cycle, typical a frame after (Flash is a frame-based animation environment). When redraw happens, the code can then evaluate all situations holistically.

Flex’s lifecycle provides granular invalidation. Developer could choose from invalidateProperties(), invalidationSize(), invalidatDisplayList() and invalidateSkinState() (for Spark components). As Flex goes through the lifecycle of “validating” these invalidations, commitProperties(), measure(), updateDisplayList(w, h), getCurrentSkinState() would be called to perform the validation. You may find more information about the component lifecycle here, here, and here.

In your case, you should not have to invalidate on your own, unless the charting component does not properly invalidate certain property, you don’t need to call the invalidate or validate methods.