¿Cómo hago una actualización de Flex Chart cada vez que se agregan datos a su proveedor de datos?

Question

Ahora debo estar perdiendo algo aquí, ya que parece ser un problema muy básico que se solucionaría en cualquier " Comenzando con los gráficos de Flex " tutorial. Sin embargo, todo lo que pude encontrar fue sugerencias de que el gráfico debería actualizarse automáticamente cada vez que el proveedor de datos cambie. Eso sí, consejos.

Este es mi marcado:

<?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>

Y esto es parte de mi código 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);
}

Al hacer clic en " Inicio " Botón, la matriz de datos se extiende cada 3 segundos, pero el gráfico en la pantalla sigue siendo el mismo.

Answer 1

Eche un vistazo a esto . En Flex, todas las clases de estructura de datos (como Array ) tienen clases de Colección (o CollectionView) correspondientes que actúan como envoltorios. Cuando utiliza las funciones de envoltorio, como addItem () , envía un evento a cualquier cosa que escuche para notificarles que la colección ha cambiado. Querrá establecer el dataProvider en una instancia de ArrayCollection que contiene xmlDataTest .

EDIT : también, ya que originalmente no estaba muy claro, deberá hacer todos su manipulación de la matriz a través del contenedor ArrayCollection. Cualquier cambio realizado en los datos subyacentes que no pasan por esa interfaz que el resto del sistema no tiene forma de conocer.

Answer 2

Creo que es correcto hacer una colección de Array como rmeador describe.

Puede solucionar esto llamando al método refreshBindings () del PlotChart de esta manera: idOfPlotChart.refreshBindings (); después de que los datos se actualicen en su función vAppendDatum .