Posted on

Flex Charts with Defined Colors

This tutorial will show you how to create  chart programmatically out of an XML file with filling colors.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: Load Country.xml and convert it to XMLList

ColumnSeries: Defines a data series for a ColumnChart control.
CategoryAxis: CategoryAxis class to define a set of labels that appear along an axis of a chart.
setStyle: Sets a style property on any component instance. Here setStyle has been used to define the colors for each series
Color Codes which are applied for the Charts below


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 mx.charts.CategoryAxis;
import mx.charts.series.ColumnSeries;
import mx.charts.ColumnChart;


private function
createComplete(e:Event):void
{
var MainXML:URLLoader=new URLLoader(new URLRequest(“Country.XML”))
MainXML.addEventListener(Event.COMPLETE,LoadCountry)
}

private function LoadCountry(e:Event):void
{

var CL:XML=new XML(e.target.data)
var CountryList:XMLList=new XMLList(CL.item)
var IColumn1:ColumnChart=new ColumnChart();
IColumn1.dataProvider=CountryList

//Setting Horizontal Axis
var xAxis:CategoryAxis=new CategoryAxis()
xAxis.categoryField =”@Country”
IColumn1.horizontalAxis=xAxis;


//Column Serier for Silver

var NS:ColumnSeries= new ColumnSeries();
NS.yField = “@Silver”;
NS.setStyle(“fill”,”0x1b6528″) // Filling Color to the columnseries

IColumn1.series.push(NS) //Pushing columnseries to the column chart (just like a values been pushed to
an array)


//Column Serier for Bronze
var NS:ColumnSeries= new ColumnSeries();
NS.yField = “@Bronze”;
NS.setStyle(“fill”,”0x7cba87″) // Filling Color to the columnseries

IColumn1.series.push(NS) //Pushing columnseries to the column chart (just like a values been pushed to
an array)

//Column Serier for Gold

var NS:ColumnSeries = new ColumnSeries();
NS.yField = “@Gold”;
NS.setStyle(“fill”,”0x26b540″) // Filling Color to the columnseries
IColumn1.series.push(NS) //Pushing columnseries to the column chart (just like a values been pushed to an array)addChild(IColumn1)
}
]]>
</mx:Script>
</mx:Application>

You typically use the CategoryAxis class to define a set of labels that
appear along an axis of a chart

Output