Flex Pie Chart using XML as data source

Pie Chart in flex using XML as dataprovider for piechart

The XML format should be as shown below.

<?xml version="1.0" encoding="utf-8" ?>
<items>
<item name="option1" number="2000" />
<item name="option2" number="9000" />
<item name="option3" number="5000" />
<item name="option4" number="7000" />
</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">
<mx:HTTPService id="dataRequest" url="" showBusyCursor="true" 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 dataRequestFaultHandler(event:FaultEvent):void {
Alert.show(event.fault.message);
}
]]> </mx:Script>
<mx:PieChart width="100%" height="100%" showDataTips="true" dataProvider="{dataRequest.lastResult.items.item}" id="myChart">
<mx:series>
<mx:PieSeries width="100%" height="100%" field="number" nameField="name" />
</mx:series>
</mx:PieChart>
<mx:Legend direction="horizontal" dataProvider="{myChart}"/>
</mx:Application>

The result would be like the below image.

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.