Expand my Community achievements bar.

Automatically update chart every second.

Avatar

Level 1
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.
7 Replies

Avatar

Former Community Member
@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

Avatar

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.

Avatar

Former Community Member
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>













Avatar

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:187]

at
mx.charts.chartClasses::ChartBase/processRollEvents()[C:\work\flex\dmv_automation\projects\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

Avatar

Former Community Member
@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

Avatar

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!

Avatar

Level 1

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.