How do I make a Flex Chart refresh whenever data is added to its dataProvider?

Question

Now I must be missing something here, as this seems a very basic issue that would be addressed in any "Getting started with Flex charting" tutorial. However, all that I could find was hints that the chart should update automatically whenever the dataProvider changes. Mind you, hints.

This is my markup:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="econemon Sensor Simulator">
    <!-- ... -->
    <mx:Script source="SimulatorFunctions.as" />
    <mx:HDividedBox left="0" top="0" bottom="0" right="0">
     <!-- ... -->
     <mx:VDividedBox width="75%" height="100%">
      <mx:PlotChart width="100%" height="33%" dataProvider="{xmlDataTest}">
       <mx:horizontalAxis>
        <mx:DateTimeAxis dataUnits="seconds" displayLocalTime="true" parseFunction="dtFromUnixtime"/>
       </mx:horizontalAxis>
       <mx:series>
        <mx:LineSeries xField="dt" yField="fltValue" displayName="Testkurve" />
       </mx:series>
      </mx:PlotChart>
      <mx:Panel width="100%" height="66%">
       <mx:Button label="Start" click="vDataStart()" />
       <mx:Button label="Stop" click="vDataStop()" />
            </mx:Panel>
        </mx:VDividedBox>
    </mx:HDividedBox> 
</mx:WindowedApplication>

And this is part of my ActionScript:

[Bindable]
public var xmlDataTest:Array = [
     { dt: "1230908694", fltValue: "50.4" },
     // ...
     { dt: "1230909594", fltValue: "35.4" }
]

public var dflt:Number = 10.0;
public var timData:Timer = new Timer(3000);

// ...

public function vDataStart():void
{
    if (!timData.running) {
     timData.addEventListener(TimerEvent.TIMER, vAppendDatum);
     timData.start();
    }
}

public function vDataStop():void
{
    if (timData.running) {
     timData.stop();
    }
}

public function vAppendDatum(evt:Event):void
{
    var dtNew:String;
    var fltNew:String;
    var fltT: Number;
    dtNew = String(Number(xmlDataTest[xmlDataTest.length - 1].dt) + 100);
    fltT = Number(xmlDataTest[xmlDataTest.length - 1].fltValue);
    if (fltT < 10.0 || fltT > 70) {
     dflt *= -1;
    }
    fltNew = String(fltT + dflt);
    xmlDataTest.push({ dt: dtNew, fltValue: fltNew });
    //trace("Datenpunkte: " + xmlDataTest.length);
}

On clicking the "Start" button, the data array is extended every 3 seconds, but the chart on the screen remains the same.

Answer 1

Take a look at this. In Flex, all of the data structure classes (such as Array) have corresponding Collection (or CollectionView) classes that act as wrappers. When you use the wrapper functions such as addItem(), it dispatches an event to anything listening to notify them the collection has changed. You'll want to set the dataProvider to an instance of ArrayCollection that wraps xmlDataTest.

EDIT: also, since I wasn't quite clear originally, you'll need to do all your manipulation of the array through the ArrayCollection wrapper. Any changes made to the underlying data that don't go through that interface the rest of the system has no way of knowing about.

Answer 2

I believe making it an ArrayCollection like rmeador describes is correct.

You may be able to work around this by calling the refreshBindings() method of the PlotChart like this: idOfPlotChart.refreshBindings(); after the data is updated in your vAppendDatum function.