Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.

change category axis of column chart using Combobox in flex

Avatar

Level 1
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>

0 Replies