How to update Flex Chart every time data is added to its dataProvider?

Now I must be missing something here as it seems like a very simple problem that any Getting Started with Flex tutorial will address. However, all I could find was a hint that the chart should update automatically whenever the DataProvider changes. Keep in mind the 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);
}

      

When you press the "Start" button, the data array expands every 3 seconds, but the diagram on the screen remains unchanged.

0


source to share


2 answers


Check out this one . In Flex, all data structure classes (for example Array

) have corresponding Collection (or CollectionView) classes that act as wrappers. When you use wrapper functions like addItem()

, it dispatches an event to any listener to notify the collection change. You need to set the dataProvider to the instance ArrayCollection

that is wrapping xmlDataTest

.



EDIT : Also, since I was not completely clear initially, you will need to do all your array manipulations through the ArrayCollection wrapper. Any changes made to the underlying data that do not go through this interface are beyond the reach of the rest of the system to know.

+7


source


I believe that creating an ArrayCollection as described by rmeador is correct.



You might be able to get around this by calling the refreshBindings()

PlotChart method like this: idOfPlotChart.refreshBindings();

after the data is updated in your function vAppendDatum

.

+1


source







All Articles