5 Replies Latest reply on Oct 18, 2006 1:59 PM by leotemp

    dynamic display of data

    socko456John
      I have data coming out of mat lab that I want to display in flex

      I tried the examples at
      http://flexapps.macromedia.com/flex15/chartexplorer/explorer.mxml?versionChecked=true
      and even when I copy and paste they still don;t work

      everything is local and the xml file is updated every second, but flex only shows the graph without the lines...... can anyone help? thanks.

      also is there a way to put the same XML file into a datagrid?

      thanks in advance, I really am enjoying the flex experience
        • 1. Re: dynamic display of data
          leotemp Level 1
          I may be able to help if you post a simple version of your app, just the part thats giving you the problem.
          • 2. Re: dynamic display of data
            socko456John Level 1
            its really simple since I can't get it to work




            -----------------------this is the chart--------------

            <?xml version="1.0"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">

            <mx:Model id="dataGraph" source="datachart.xml"/>
            <mx:Panel title="title"
            height="419" width="100%" layout="horizontal" roundedBottomCorners="true">

            <mx:LineChart id="linechart" height="100%" width="100%" paddingLeft="5" paddingRight="5"
            showDataTips="true" dataProvider="{dataGraph.item}">

            <mx:horizontalAxis>
            <mx:CategoryAxis categoryField="time" ticksBetweenLabels="true" displayName="Time"/>
            </mx:horizontalAxis>

            <mx:series>
            <mx:LineSeries yField="lane_a" form="segment" displayName="Lane A"/>
            <mx:LineSeries yField="lane_b" form="curve" displayName="Lane B"/>
            </mx:series>

            </mx:LineChart>

            <mx:Legend dataProvider="{linechart}" width="99"/>

            </mx:Panel>
            </mx:Application>


            -------------------------this is the XML-----------------------------

            <?xml version="1.0"?>
            <items>
            <item>
            <time>1 min</time>
            <lane_a>12</lane_a>
            <lane_b>54</lane_b>
            </item>

            -------after a minute this is added to the file..... and so on--------------

            <item>
            <time>2 min</time>
            <lane_a>2</lane_a>
            <lane_b>4</lane_b>
            </item>
            </items>



            thanks for your reply
            • 3. Re: dynamic display of data
              leotemp Level 1
              I dont think you can use a model as a dynamic source for xml like that, try using an HTTPService component pointed at the xml file, then in your flex app use the .lastResult property of the HTTPservice as your data provider. You will then have to create some kind of function to call the HTTPService.send() method on a timely basis. If that makes sends..
              • 4. Re: dynamic display of data
                socko456John Level 1
                it makes sense...


                but I don't quite understand how to do it, does it work locally?
                • 5. Re: dynamic display of data
                  leotemp Level 1
                  yes, at least the process i talked about, im not sure how your updating your xml file locally but i imagine you have that handled. Here is quick example of what Im talking about, I havent been able to test it so take it as a logic example rather then usable source:

                  <?xml version="1.0"?>
                  <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="{init()}">

                  <mx:Script>
                  <![CDATA[
                  // import the timer util //
                  import flash.utils.Timer;

                  // create time variable, controls how long to wait for xml retrieval //
                  // specify amount of seconds //
                  public var timeDelay:Number= 30;

                  // create function that times the xml retrieval //
                  private function waitForData():void {
                  var minuteTimer:Timer = new Timer(1000, timeDelay);
                  // designates listeners for the interval event and the completion event

                  minuteTimer.addEventListener(TimerEvent.timerComplete , getXML);
                  minuteTimer.addEventListener(Event.TIMER_COMPLETE, onTimerComplete);

                  // starts the timer ticking
                  minuteTimer.start();
                  }
                  private function getXML():void {
                  // sends request for xml //
                  dataGraph.send();
                  // tells app to execute the time once a result is recieved form the httpservice //
                  dataGraph.addEventListener("result" , waitForData);
                  }
                  private function init():void {
                  dataGraph.send();
                  }
                  ]]>
                  </mx:Script>

                  <mx:HTTPService url="datachart.xml" id="dataGraph"/>
                  <mx:Panel title="title"
                  height="419" width="100%" layout="horizontal" roundedBottomCorners="true">

                  <mx:LineChart id="linechart" height="100%" width="100%" paddingLeft="5" paddingRight="5"
                  showDataTips="true" dataProvider="{dataGraph.lastResult.items.item}">

                  <mx:horizontalAxis>
                  <mx:CategoryAxis categoryField="time" ticksBetweenLabels="true" displayName="Time"/>
                  </mx:horizontalAxis>

                  <mx:series>
                  <mx:LineSeries yField="lane_a" form="segment" displayName="Lane A"/>
                  <mx:LineSeries yField="lane_b" form="curve" displayName="Lane B"/>
                  </mx:series>

                  </mx:LineChart>

                  <mx:Legend dataProvider="{linechart}" width="99"/>

                  </mx:Panel>
                  </mx:Application>

                  The logic here is
                  1] the app starts and initializes the init() function from the "creationComplete" even defined in the application tag
                  2] the init() function sends the request to your xml document through the HTTPService component named "dataGraph" and also creates a eventListener for the incoming result of your xml request.
                  3] upon a complete result in your HTTPServie the event "result" is dispatched, the eventListener "hears" this and executes the waitForData() function which creates a timer that waits 30 seconds(or however long you specify in the timeDelay var) It also creates an eventListener for the timer's completion
                  4] upon the timer's completion, it sends another request for data through the HTTPService which upon completion will trigger the "result' event restarting the whole loop again and again

                  Like i said, i didnt test it and i copied the timer from the docs which are often wrong, so good luck!