0 Replies Latest reply on Aug 13, 2008 6:12 AM by Ayush.Jain

    change category axis of column chart using Combobox in flex

    Ayush.Jain
      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>