Question

I’ve got a small action-script chart, that’s meant to be live updating, and also be able to support more than 10000 points of data. The way it’s currently set up it doesn’t need to redraw the whole chart if the new line we wish to add doesn’t extend that chart’s boundaries.

Yet it does, the redraw regions show the whole chart as being redrawn as opposed to the single line i need to add.

When the chart gets a new piece of data from the javascript it does the following.(some stuff has been stripped for clarity.

private function registerJSCallbacks() : void
{
    ExternalInterface.addCallback( "addData", addData );
}

private function addData( val : * ) : void
{
    trace( "addData",val );
    var g: Graphics = this.graphics;    
    g.moveTo(x1,y1); 
    g.lineTo(x2,y2); 
}

Is there any better way to do that, that won’t redraw the whole screen? Is my coding pattern wrong for this type of update?

I’m a novice so even vaguely relevant advice would be appreciated.

Answer 1

You’re editing the underlying vector, so it has to redraw the whole thing. You’ve got a couple options:

1. (easiest): Spawn a new Sprite after every X draw operations, so that each draw only recalculated a few vector lines

2. (more involved): Use one Sprite to draw, and every X draw operations, write the graphics in the sprite to a backing BitmapData object (using bitmapData.draw) and clear the sprite.

Option 2 is probably performs better than option 1, but I haven’t benchmarked this specific scenario. You might get comparable performance if you sprite.cacheAsBitmap = true on each Sprite in option 1 as you move to a new “active” sprite.