Showing posts with label Flex Column Chart. Show all posts
Showing posts with label Flex Column Chart. Show all posts

Monday, January 3, 2011

Flex Column Chart using XML as source

Column Chart in flex using XML as dataprovider for column chart

The XML format should be as shown below.

<items>
<item>
<name> Test1 </name>
<number> 1000 </number>
</item>
<item>
<name> Test1 </name>
<number> 1000 </number>
</item>
<item>
<name> Test1 </name>
<number> 1000 </number>
</item>
<item>
<name> Test1 </name>
<number> 1000 </number>
</item>
</items>

The Flex application code is shown below.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
<mx:HTTPService id="dataRequest" url="" showBusyCursor="true" result="dataRequestResultHandler(event);" fault="dataRequestFaultHandler(event);" />
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
public function initApp():void {
var timeStampForNocache:Date = new Date() ;
var urlAgent:String = "Your XML returing URL PATH & tim=" + timeStampForNocache.toString();
dataRequest.url = urlAgent;
dataRequest.send();
}
[Bindable]
private var stats:ArrayCollection;
private function dataRequestResultHandler(event:ResultEvent):void {
stats = event.result.items.item;
}
private function dataRequestFaultHandler(event:FaultEvent):void {
Alert.show(event.fault.message);
}
]]> </mx:Script>
<mx:ColumnChart id="xmlChartBar" dataProvider="{stats}" showDataTips="true" width="500">
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{stats}" categoryField="option"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries showDataEffect="fadeIn" xField="name" yField="number" displayName="Hits" />
</mx:series>
</mx:ColumnChart>
</mx:Application>


The result would be like the below image.

Related Posts Plugin for WordPress, Blogger...