BarChart Example

BarChart.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;

   [Bindable]
   private var _chartData:ArrayCollection = new ArrayCollection([
    {Month: "January '03",   Widgets:885202,  Blinkies: 184454,  monthIdx:1  },
    {Month: "February '03",  Widgets:683392,  Blinkies: 945385,  monthIdx:2  },
    {Month: "March '03",   Widgets:638820,  Blinkies: 442383,  monthIdx:3  },
    {Month: "April '03",   Widgets:949932,  Blinkies: 841201,  monthIdx:4  },
    {Month: "May '03",    Widgets:704302,  Blinkies: 587449,  monthIdx:5  },
    {Month: "June'03",    Widgets:704302,  Blinkies: 587449,  monthIdx:6  },
    {Month: "July '03",   Widgets:453552,  Blinkies: 393039,   monthIdx:7  },
    {Month: "August '03",   Widgets:387254,  Blinkies: 746652,  monthIdx:8  },
    {Month: "September '03",  Widgets:537254,  Blinkies: 263652,  monthIdx:9  },
    {Month: "October '03",   Widgets:686254,  Blinkies: 472652,  monthIdx:10  },
    {Month: "November '03",  Widgets:820254,  Blinkies: 246652,  monthIdx:11 },
    {Month: "December '03",  Widgets:800254,  Blinkies: 826652,  monthIdx:12 }
    ]);

   private function formatThousands(val:Number):String
   {
    return Math.floor(val/100)/10  + "K";
   }

  ]]>
 </mx:Script>

 <mx:Panel title="Sample Chart" width="100%" height="100%">
  <mx:BarChart id="barChart" dataProvider="{_chartData}" width="100%" height="100%" showDataTips="true">
   <mx:verticalAxis>
    <mx:CategoryAxis categoryField="Month" displayName="Month"/>
   </mx:verticalAxis>

   <mx:horizontalAxis>
    <mx:LinearAxis displayName="Units Sold"/>
   </mx:horizontalAxis>

   <mx:series>
    <mx:BarSeries yField="Month" xField="Widgets" displayName="TestWidgets">
     <mx:fill>
      <mx:SolidColor color="#82C9EB"/>
     </mx:fill>
    </mx:BarSeries>
    <mx:BarSeries yField="Month" xField="Blinkies" displayName="TestBlinkies"/>
   </mx:series>

  </mx:BarChart>
  <mx:Legend dataProvider="{barChart}" direction="horizontal"/>
 </mx:Panel>
 <mx:Style source="ChartStyles.css"/>
</mx:Application>

ChartStyles.css

/* CSS file */

BarChart
{
 fontWeight: normal;
 gridLinesStyleName: barChartGridLines;
 fontFamily: Arial;
}
.barChartGridLines
{
 direction: both;
 verticalShowOrigin: true;
}
@font-face
{
 fontFamily: Arial;
 fontWeight: normal;
 fontStyle: normal;
 src: local("Arial");
}

The executable swf for the above example is as shown below: