2 Replies Latest reply on Apr 5, 2010 10:10 AM by chieffan

    Column Chart with Multiple Columns

    chieffan

      I am using a CFC to grab data in a database.  The data looks like this

       

      jan cars 100

      jan trucks 150

      jan bikes 125

       

      feb cars 112

      feb trucks 132

      feb bikes 121

       

      etc.  I want a bar chart to show the numbers on the left and the month along the bottom.

       

      When I import this, it leaves two blank columns then shows the Jan Bikes.  When I add another series it does the same thing.  What I want is for the data to be left aligned and have Jan then a column for each item, then have Feb and a column for each item.

       

      My data is coming in via

      inventory= event.result

      as ArrayCollection;

       

      <mx:ColumnChart

       

       

      y="40"

      id="

      myChart"

      dataProvider="

      {inventory}"

      showDataTips="

      true"

      selectionMode="

      single"

       

      width="

      100%" height="100%">

       

       

      <!-- vertical axis -->

       

       

      <mx:verticalAxis>

       

       

      <mx:LinearAxis baseAtZero="true"

       

       

       

       

      </mx:verticalAxis>

       

       

      <mx:horizontalAxis>

       

       

      <mx:CategoryAxis

      dataProvider="

      {inventory}"

      categoryField="

      sales"/>

       

       

      </mx:horizontalAxis>

       

       

      <mx:series>

       

       

      <mx:ColumnSeries

       

      color="

      #FFFFFF"

      xField="

      month"

      yField="

      sales" >

       

       

       

       

       

      </mx:ColumnSeries>

      <mx:ColumnSeries

       

      color="

      #FFFFFF"

      xField="

      month"

      yField="

      sales" >

       

       

       

       

       

       

       

       

      </mx:ColumnSeries>

       

       

       

       

       

       

      </mx:ColumnChart>

        • 1. Re: Column Chart with Multiple Columns
          msakrejda Level 4

          You need three ColumnSeries. Set the dataProvider of each directly (instead of setting it for the ColumnChart) to something like this:

           

            var cars:ListCollectionView = new ListCollectionView();

            cars.list = inventory;

            cars.filterFunction = function(item:Object):Boolean {

              return item['category' /* or whatever your category field is */] == 'cars';

            };

           

          Do something similar for bikes and trucks. You can do something like this if you don't know the number of categories as well, but it's rather trickier (and left as an exercise for the reader).

          • 2. Re: Column Chart with Multiple Columns
            chieffan Level 1

            Thank you very much.  That was extremely helpful.