Create Column Chart Component

The following example shows how you can create a column chart as a component and invoke in application
by calling the getDefintionByName() method.


<mx:Application xmlns:mx=”” layout=”absolute”
import MyComps.*;
import flash.utils.getDefinitionByName;
import mx.controls.*;
private var CC:PanelComp;ColumnCompChart // Initiate ColumnCompChart component.
private function createComplete(e:Event):void
var cls:Class = getDefinitionByName(“MyComps.ColumnCompChart”) as Class;
var instance:Object = new cls();
addChild(DisplayObject(instance) );


<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Panel xmlns:mx=”” width=”400″ height=”300″ 

title=”My Chart”>
import mx.collections.ArrayCollection;
public var medalsAC:ArrayCollection = new ArrayCollection( [
{ Country: “USA”, Gold: 35, Silver:39, Bronze: 29 },
{ Country: “China”, Gold: 32, Silver:17, Bronze: 14 },
{ Country: “Russia”, Gold: 27, Silver:27, Bronze: 38 } ]);
<mx:ColumnChart id=”Column1″ height=”100%” width=”100%”
<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}” />