This tutorial will show you how to create component chart out of an XML file.
Step1 :Create Country.xml with the following data and upload into <src> folder
Country.XML
|
<main>
<item Country= "USA" Gold="35" Silver="39" Bronze="29"/>
<item Country= "China" Gold="32" Silver="17" Bronze="14"/>
<item Country= "Russia" Gold="27" Silver="27" Bronze="38"/>
</main> |
Step2: Create panel component with ColumnChart
ColumnCompChart.mxml
|
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="400" height="300" title="My Chart">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public var medalsAC:XMLList; //as the data coming from XML , creating public
variable as XMLList.
]]>
</mx:Script>>
<mx:ColumnChart id="Column1" height="100%" width="100%" dataProvider="{medalsAC}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="@Country"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries xField="@Country" yField="@Gold"
displayName="@Country" />
<mx:ColumnSeries xField="@Country" yField="@Silver"
displayName="@Country" />
<mx:ColumnSeries xField="@Country" yField="@Bronze"
displayName="@Country" />
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{Column1}" />
</mx:Panel > |
Step3: Load Country.xml and convert it to XMLList and pass on to the
public variable medalsAC.
ChartDataXML.mxml
|
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="createComplete(event)">
<mx:Script>
<![CDATA[
import MyComps.*;
import flash.utils.getDefinitionByName;
import mx.controls.*;
private var CC:ColumnCompChart
private function createComplete(e:Event):void
{
var MainXML:URLLoader=new URLLoader(new URLRequest("Country.XML"))
MainXML.addEventListener(Event.COMPLETE,MainXMLL)
}
private function MainXMLL(e:Event):void
{
var CL:XML=new XML(e.target.data)
var CountryList:XMLList=new
XMLList(CL.item)
var cls:Class = getDefinitionByName("MyComps.ColumnCompChart") as Class;
var instance:Object = new cls();
instance.medalsAC=CountryList;
addChild(DisplayObject(instance) );
}
]]>
</mx:Script>
</mx:Application> |
