7 Replies Latest reply on Oct 26, 2009 6:28 AM by alvarocavalcanti

    Automatically update chart every second.

    Sailor_Sea
      Hi, I created a php file that connects to a MySQL database and converts the info into XML data.
      I then created a chart in Flex 3 that uses that ".php" file as the dataProvider.

      Everything works great but I would like to have my chart automatically update (refresh) every sec to show the latest info from the database.

      Can this be done?

      Thank you.
        • 1. Re: Automatically update chart every second.
          @Sailor:
          You bet. This is almost exactly what I am working on now.
          In my case, the data is coming from an XML file, but the difference is minor.

          You must bind the data. "Bindable"

          You must use an XMLListCollection or an ArrayCollection object to hold your data.

          I am using both polling and socket events to tell the flash file to grab new data- both work.

          I found examples in the Adobe and FlexExamples documentation. "charting" and "data visualization" will yield search results.

          YMMV- I have no idea yet how this works in a production environment, I am just a newbie building a prototype.

          John
          • 2. Re: Automatically update chart every second.
            Sailor_Sea Level 1
            Hi John,
            haven't been able to collect my XML data and store it in an ArrayCollection...
            My XML data is genetared from a PHP file which connects to a MySQL database.
            Do you have any examples?
            Thanks.
            • 3. Re: Automatically update chart every second.
              Level 1
              All I did was search through the examples, so nothing new in my extract. I just copy and paste and try it out.

              maybe this helps. Getting the socket connection to work is a bit harder, but theres an example for that too.

              Note1: this uses an arraycollection, but an xmllistcollection *might* be better.

              Note2: use e4x ( search on it)

              ////////////////////////////////////////////////////
              <?xml version="1.0"?>
              <!-- -->

              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="data.send()" >
              <mx:HTTPService url=" http://path-to-file.xml"
              id="data"
              resultFormat="e4x"
              result="xmlResultHandler(event);"
              fault="xmlFaultHandler(event);"
              />


              <mx:Script>
              <![CDATA[
              import mx.collections.ArrayCollection;
              import flash.net.navigateToURL;
              import mx.controls.Alert;
              import mx.rpc.events.FaultEvent;
              import mx.rpc.events.ResultEvent;


              [Bindable]
              private var myxmldata:ArrayCollection = new ArrayCollection;

              [Bindable]
              private var xmlFeed:XML;

              // Result handler for httpservice- gets called after XML is loaded.
              private function xmlResultHandler(event:ResultEvent):void
              {
              myxmldata.removeAll() ;
              xmlFeed = event.result as XML;
              for each(var ourxml:XML in xmlFeed.elements() ) myxmldata.addItem(ourxml);

              }
              // Fault handler for httpservice- displays the error.
              private function xmlFaultHandler(event:FaultEvent):void
              {
              Alert.show(event.fault.message, "Could not load XML file!");
              }

              // make a looping timer function just for updating the collection
              // USING polling
              public function initTimer():void {
              // The first parameter in the Timer constructor
              // is the interval, in milliseconds.
              // The second parameter is how many times to run (0 is
              // infinity).
              var myTimer:Timer = new Timer(5000, 20);

              // Add the listener for the timer event. This connects to the updateData function
              // when an event comes through
              myTimer.addEventListener(TimerEvent.TIMER, updateData); // this is the line that changed from the original

              myTimer.start();
              }

              private function updateData(event:TimerEvent):void {
              data.send();
              display("Updated based on bowser-based polling...");
              }

              // ---used to display messages in panel "t"
              private function display( text:String ):void {
              t.text += text;
              t.text += "\n";
              }

              ]]>
              </mx:Script>


              <mx:Panel title="Column Chart">
              <mx:ColumnChart id="myChart" dataProvider="{myxmldata}" showDataTips="true">
              <mx:horizontalAxis>
              <mx:CategoryAxis
              dataProvider="{myxmldata}"
              categoryField="<element1 from xml>"
              />
              </mx:horizontalAxis>
              <mx:series>
              <mx:ColumnSeries
              xField="<element1 from xml>"
              yField="<element2 from xml>"
              displayName="Packets"
              />
              <mx:ColumnSeries
              xField="<element1 from xml>"
              yField="<element3 from xml>"
              displayName="BPS"
              />
              </mx:series>
              </mx:ColumnChart>
              <mx:Legend dataProvider="{myChart}"/>
              </mx:Panel>
              <mx:HBox>
              <mx:Button id="b1" label="Update loop based on a timer: polling" click="initTimer()"/>
              <mx:Button id="b2" label="Update Data from file one time " click="data.send()"/>
              </mx:HBox>


              <mx:Panel title="Reloading the XML data structure from file and re-charting the data" height="50%" width="50%" paddingTop="10" paddingLeft="10" paddingRight="10">

              <mx:Text id="t" width="80%">
              <mx:text>. </mx:text>
              </mx:Text>

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






              • 4. Re: Automatically update chart every second.
                Sailor_Sea Level 1
                Hi John, I got everything working great! Thanks!
                But I now have a new problem...
                As an application, it works great! but if I convert it to a module, this is what happens:

                I load the module, works great.
                I unload the module, no problem.
                When I re-load the module, as soon as the graph loads I get the follow error when I mouse over the columns:

                An ActionScript error has occured:
                TypeError: Error #1034: Type Coercion failed: cannot convert mx.managers::DragManagerImpl@3a0cd09 to mx.managers.IDragManager.
                at mx.managers::DragManager$/get impl()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\managers\DragManager.as:152]
                at mx.managers::DragManager$/get isDragging()[E:\dev\3.1.0\frameworks\projects\framework\src\mx\managers\DragManager.as:18 7]
                at mx.charts.chartClasses::ChartBase/processRollEvents()[C:\work\flex\dmv_automation\project s\datavisualisation\src\mx\charts\chartClasses\ChartBase.as:2310]
                at mx.charts.chartClasses::ChartBase/mouseMoveHandler()[C:\work\flex\dmv_automation\projects \datavisualisation\src\mx\charts\chartClasses\ChartBase.as:4306]

                Have you experienced this problem before?

                Thanks.

                -David
                • 5. Re: Automatically update chart every second.
                  Level 1
                  @David

                  here is your clue:
                  "cannot convert mx.managers::DragManagerImpl@3a0cd09 to mx.managers.IDragManager."
                  Look at your data.

                  But I am a spanking-newbie too, so my attention isn't worth much.

                  I am paying attention now on the yahoo groups flexcoders where there is 10x the traffic of this list.

                  John
                  • 6. Re: Automatically update chart every second.
                    Sailor_Sea Level 1
                    Hi again John, everything works with Firefox. It updates every 30sec.
                    Code:

                    public function initTimer():void {
                    var myTimer:Timer = new Timer(30000);
                    myTimer.addEventListener(TimerEvent.TIMER, updateData);
                    myTimer.start();
                    }

                    But with Internet Explorer, it only updates every +/-30min ???

                    Do you have any idea what can cause this issue?

                    Thanks!
                    • 7. Re: Automatically update chart every second.
                      alvarocavalcanti

                      David,

                       

                      I found this thread when looking for that exactly same problem. We have a dashboard and when we load a widget that has a chart just as you described (open, close and open it again) this error pops out.

                       

                      Did you get to fix it? If so, how?

                       

                       

                      -

                      Alvaro Cavalcanti.