Highlighted

change category axis of column chart using Combobox in flex

Ayush_Jain

13-08-2008

I am trying to change the data of a column chart using a
combo box. I am using XML for data.



What I am planing to do is.. the combo box will get "Month"
say January, feb etc and same will reflect on the X axis and the
data related to only the selected month should be shown. Say if
January is selected, the x axis should show "January" and the chart
should show only data related to January.



My XML DATA

--------------------------

<YearlyData>

<Sample month="January" revenue="120" costs="45"
overhead="102" oneTime="23" />

<Sample month="February" revenue="108" costs="42"
overhead="87" oneTime="47" />

<Sample month="March" revenue="150" costs="82"
overhead="32" oneTime="21" />

<Sample month="April" revenue="170" costs="44"
overhead="68" />

<Sample month="May" revenue="250" costs="57"
overhead="77" oneTime="17" />

<Sample month="June" revenue="200" costs="33"
overhead="51" oneTime="30" />

<Sample month="July" revenue="145" costs="80"
overhead="62" oneTime="18"/>

<Sample month="August" revenue="166" costs="87"
overhead="48" />

<Sample month="September" revenue="103" costs="56"
overhead="42" />

<Sample month="October" revenue="140" costs="91"
overhead="45" oneTime="60" />

<Sample month="November" revenue="100" costs="42"
overhead="33" oneTime="67" />

<Sample month="December" revenue="182" costs="56"
overhead="25" oneTime="48" />

<Sample month="May" revenue="120" costs="57"
overhead="30" />

</YearlyData>





My MXML Code

-------------------------------------------------



<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="horizontal" initialize="srv.send()">

<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

import mx.rpc.events.ResultEvent;

var arrBook:ArrayCollection = new ArrayCollection;

function ResHandler(event:ResultEvent)

{

arrBook = event.result.YearlyData.Sample;

cb.dataProvider = arrBook;

ColumnChart1.dataProvider = arrBook;

}

function changeChart()

{

cb.selectedItem = CA.categoryField

}

]]>

</mx:Script>

<mx:HTTPService id="srv" url="dataSheet.xml"
result="ResHandler(event)" />

<mx:ComboBox id="cb" labelField="month"
change="changeChart()"/>

<mx:ColumnChart id="ColumnChart1" width="688">

<mx:horizontalAxis>

<mx:CategoryAxis id="CA" categoryField="month" />

</mx:horizontalAxis>

<mx:series>

<mx:ColumnSeries displayName="revenue 1"
yField="revenue"/>

<mx:ColumnSeries displayName="costs 1"
yField="costs"/>

<mx:ColumnSeries displayName="overhead 1"
yField="overhead"/>

<mx:ColumnSeries displayName="onetime 1"
yField="onetime"/>

</mx:series>

</mx:ColumnChart>

<mx:Legend dataProvider="{ColumnChart1}"/>

</mx:Application>