Posted on

Refresh Chart data

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
 Adding the below function  to the component column chart, that again assigns the medalAC to the columnchart dataprovider (Updates the data),  If there is a delay between the component initiation and data assignation, Chart wouldnt show the value. So refreshing the data would help to get the data updated. So below function help to manual trigger the chart to get the updated data.

public function refresh() :void  // A function to refresh the data for chart component
{
Column1.dataProvider=medalAC;  //again it assigns medalAC to the columnchart in order to get the data refreshed for column chart
}

<?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.
public function refresh() :void  // A function to refresh the data for chart component
{
Column1.dataProvider=medalAC;  //again it assigns medalAC to the columnchart in order to get the data refreshed for column chart

}
]]>

</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;
importmx.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;
instance.refresh() //Calling refresh function to get the data updated
addChild(DisplayObject(instance) );
}

]]>
</mx:Script>
</mx:Application>
Posted on

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.


ChartDef.mxml

<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: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) );
}
]]>
</mx:Script>
</mx:Application>

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: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: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>