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

Monday, January 3, 2011

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.

Related Posts Plugin for WordPress, Blogger...