XML to Chart Component

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


<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"/>

Step2: Create panel component with ColumnChart


<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="400" height="300" title="My Chart">
import mx.collections.ArrayCollection;
public var medalsAC:XMLList; //as the data coming from XML , creating public
variable as XMLList.
<mx:ColumnChart id="Column1" height="100%" width="100%" dataProvider="{medalsAC}">

<mx:CategoryAxis categoryField="@Country"/>

<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:Legend dataProvider="{Column1}" />
</mx:Panel >

Step3: Load Country.xml and convert it to XMLList and pass on to the
public variable medalsAC.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="createComplete(event)">
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"))

private function MainXMLL(e:Event):void
var CL:XML=new XML(e.target.data)
var CountryList:XMLList=new
var cls:Class = getDefinitionByName("MyComps.ColumnCompChart") as Class;
var instance:Object = new cls();
addChild(DisplayObject(instance) );

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.