FusionCharts for Flex > Creating Widgets > Real-Time Capabilities > Example

FusionWidgets allow to update your gauge data by invoking real-time API methods from Flex. In this section, we will create an example in which a widget changes its data on the basis of a timed event. We will also provide a button to toggle the update facility.

As always, we start off by declaring a widget element. We also add a button, which will be used to turn on/off the update function. The overall XML would look similar to the one shown below:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns2="com.fusionwidgets.components.*">
<ns2:FusionWidgets id="fw1" x="112" y="28" width="128" height="240"
FCChartType="Cylinder" FCRenderEvent="rendered(event)" FCDataXML="{dataXML}"/>
<mx:Button id="stop_butt" x="131" y="289" label="Stop Update" click="updateToggle()"/>

<mx:Script>
<![CDATA[
import com.events.FCEvent;
import flash.events.TimerEvent;
import flash.utils.Timer;

private var time:Timer;
[Bindable]
private var dataXML:String = "<chart upperLimit='100' lowerLimit='0'>" +
"<value>32</value>" +
"</chart>";

private function rendered(event:FCEvent):void {
time=new Timer(2000);
time.addEventListener(TimerEvent.TIMER, updater);
time.start();
}

private function updater(event:TimerEvent):void {
fw1.FCSetData(Math.random()*100);
}

private function updateToggle():void {

if(stop_butt.label=="Stop Update") {
time.stop();
stop_butt.label="Start Update";
} else {
time.start();
stop_butt.label="Stop Update";
}
}
]]>
</mx:Script>
</mx:Application>

If you notice, we have created the timer object through the FCRenderEvent event handler. This ensures that no update calls are made before the widget has rendered. Within the handler we create the Timer object with an interval of 2000 ms. Next we attach out on updater function to the timer event:

time.addEventListener(TimerEvent.TIMER, updater);

The updater function does the work of updating the widget. We use the FCSetData real-time call on our widget object to set our data.

 private function updater(event:TimerEvent):void	 {
          fw1.FCSetData(Math.random()*100);
}

In this case we have just assign a random number as our widget value using the Math.random() function.

Finally, we manipulate the update function using a button. By setting click="updateToggle()" in the button, we delegate the toggle facility to the updateToggle() function.

private function updateToggle():void {				
if(stop_butt.label=="Stop Update") {
time.stop();
stop_butt.label="Start Update";
} else {
time.start();
stop_butt.label="Stop Update";
}
}

We can simply pause the update by stopping the timer with time.stop() invocation. We can also start it again with time.start().