FusionCharts for Flex > Creating Widgets > Real-Time Capabilities > Alert Manager > Setting it Up with Flex

To use the alert manager facility in Flex, you need to perform the following tasks:
  • Set the action attribute within the XML to "callFlex"
  • Track the FCAlertEvent within the Flex environment

So let's get right into the code and see how it is done.

Configuring the XML

Here, we are going to use a horinzontal LED graph for our example. We will create an XML file called HLED.xml and place it in our scr folder. The XML would be similar to the one shown below:

<chart chartBottomMargin='5' lowerLimit='0' upperLimit='100' lowerLimitDisplay='Low' 
upperLimitDisplay='High' numberSuffix='%25' showTickMarks='1' tickValueDistance='0'
majorTMNumber='5' majorTMHeight='4' minorTMNumber='0' showTickValues='1'
decimalPrecision='0' ledGap='1' ledSize='1' ledBoxBgColor='333333'
ledBorderColor='666666' borderThickness='2' chartRightMargin='20' >
<colorRange>
<color minValue='0' maxValue='30' code='FF0000' />
<color minValue='30' maxValue='50' code='FFFF00' />
<color minValue='50' maxValue='100' code='00FF00' />
</colorRange>
<value>70</value>
<alerts>
<alert minValue='0' maxValue='25' action='callFlex' param='Red zone' />
</alerts>
</chart>

In the above code, we defined an alert to be set off between 0 to 25. The action='callFlex' code states that at every alert the FCAlertEvent will be generated. Also, param='Red zone' declaration makes sure that the string "Red zone" is passed as a parameter with the event.

We track the event and handle it in our Flex code.

Handling FCAlertEvent Event

We track the FCAlertEvent event like any other event. We attach the event handler alertTrack() to our FCAlertEvent in our FusionWidgets tag. The handler is a simple function, which retreives the parameter from the event and alerts it. Parallely we also update our gauge in real-time as we did in the previous real-time example. The entire MXML code would be 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="64" y="95" width="475" FCRenderEvent="rendered(event)" height="120"
FCChartType="HLED" FCDataURL="HLED.xml" FCAlertEvent="alertTrack(event)"/>

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

private var time:Timer;
private var isAlert:Boolean=true;

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 alertTrack(e:FCEvent):void {
Alert.show(e.param);
}


]]>
</mx:Script>
</mx:Application>

After running the application, the alert would be displayed as folows:

Alert in Flex