As shown in Listing 10-5, the ColumnChart component displays data in a series of vertical bars representing the data of the ColumnSeries. Column chart variations include simple columns, clustered columns, overlaid, stacked, 100 percent stacked, and high-low.
<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
creationComplete=”initApp()” backgroundColor=”#FFFFFF”>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var chartData:ChartData = new ChartData();
[Bindable]
private var productSales:ArrayCollection;
private function initApp():void{
productSales = chartData.getDataSet1();
}
]]>
</mx:Script>
<mx:Panel title=”ColumnChart Example” width=”100%” height=”100%”
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″>
<mx:ColumnChart id=”columnChart” height=”100%” width=”100%”
paddingLeft=”5″ paddingRight=”5″
showDataTips=”true” dataProvider=”{productSales}”>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField=”Quarter”/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries xField=”Quarter” yField=”Gizmos” displayName=”Gizmos”/>
<mx:ColumnSeries xField=”Quarter” yField=”Widgets” displayName=”Widgets”/>
<mx:ColumnSeries xField=”Quarter” yField=”Gadgets” displayName=”Gadgets”/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider=”{columnChart}” direction=”horizontal”/>
</mx:Panel>
</mx:Application>
