Area chart.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
 horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
 <mx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 [Bindable]
 private var expensesAC:ArrayCollection = new ArrayCollection( [
 { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
 { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
 { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
 { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
 { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
 </mx:Script>
 <mx:Panel title="AreaChart Control" layout="horizontal" color="0xffffff" borderAlpha="0.15" width="600" height="240"
 paddingTop="10" paddingRight="5" paddingBottom="10" paddingLeft="5" horizontalAlign="center">
 <mx:AreaChart id="Areachart" color="0x323232" height="100%" showDataTips="true" dataProvider="{expensesAC}">
 <mx:horizontalAxis>
 <mx:CategoryAxis categoryField="Month"/>
 </mx:horizontalAxis>
 <mx:series>
 <mx:AreaSeries yField="Profit" form="curve" displayName="Profit"/>
 <mx:AreaSeries yField="Expenses" form="curve" displayName="Expenses"/>
 <mx:AreaSeries yField="Amount" form="curve" displayName="Amount"/>
 </mx:series>
 </mx:AreaChart>
 <mx:Legend dataProvider="{Areachart}" color="0x323232"/>
 </mx:Panel>
</mx:WindowedApplication>
BarChart.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
 horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
 <mx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 [Bindable]
 private var medalsAC:ArrayCollection = new ArrayCollection( [
 { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
 { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
 { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
 </mx:Script>
 <mx:Panel title="BarChart Control" layout="horizontal" color="0xffffff" borderAlpha="0.15" width="600" height="240"
 paddingTop="10" paddingRight="5" paddingBottom="10" paddingLeft="5" horizontalAlign="center">
 <mx:BarChart id="bar" height="100%" color="0x323232" 
 showDataTips="true" dataProvider="{medalsAC}">
 <mx:verticalAxis>
 <mx:CategoryAxis categoryField="Country"/>
 </mx:verticalAxis>
 <mx:series>
 <mx:BarSeries yField="Country" xField="Gold" displayName="Gold"/>
 <mx:BarSeries yField="Country" xField="Silver" displayName="Silver"/>
 <mx:BarSeries yField="Country" xField="Bronze" displayName="Bronze"/>
 </mx:series>
 </mx:BarChart>
 <mx:Legend dataProvider="{bar}" color="0x323232"/>
 </mx:Panel>
</mx:WindowedApplication>
BubbleChart.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
 horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
 <mx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 [Bindable]
 private var expensesAC:ArrayCollection = new ArrayCollection( [
 { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
 { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
 { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
 { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
 { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
 </mx:Script>
 <mx:Style> 
 </mx:Style>
 <mx:Panel title="BubbleChart Control" layout="vertical" color="0xffffff" borderAlpha="0.15" width="600" height="240"
 paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
 <mx:BubbleChart id="bubblechart" height="100%" width="100%" paddingRight="5" paddingLeft="5" color="0x323232"
 showDataTips="true" maxRadius="20" dataProvider="{expensesAC}">
 <mx:series>
 <mx:BubbleSeries displayName="Profit/Expenses/Amount" 
 xField="Profit" yField="Expenses" radiusField="Amount"/>
 </mx:series> 
 </mx:BubbleChart>
 <mx:Legend dataProvider="{bubblechart}" color="0x323232"/>
 </mx:Panel>
</mx:WindowedApplication>
CandlestickChart.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
 horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
 <mx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 [Bindable]
 private var expensesAC:ArrayCollection = new ArrayCollection( [
 { Date: "25-Jul", Open: 40.75, High: 40.75, Low: 40.24, Close:40.31},
 { Date: "26-Jul", Open: 39.98, High: 40.78, Low: 39.97, Close:40.34},
 { Date: "27-Jul", Open: 40.38, High: 40.66, Low: 40, Close:40.63},
 { Date: "28-Jul", Open: 40.49, High: 40.99, Low: 40.3, Close:40.98},
 { Date: "29-Jul", Open: 40.13, High: 40.4, Low: 39.65, Close:39.95},
 { Date: "1-Aug", Open: 39.00, High: 39.50, Low: 38.7, Close:38.6}, 
 { Date: "2-Aug", Open: 38.68, High: 39.34, Low: 37.75, Close:38.84}, 
 { Date: "3-Aug", Open: 38.76, High: 38.76, Low: 38.03, Close:38.12}, 
 { Date: "4-Aug", Open: 37.98, High: 37.98, Low: 36.56, Close:36.69}, 
 { Date: "5-Aug", Open: 36.61, High: 37, Low: 36.48, Close:36.86} ]);
 </mx:Script>
 <mx:Panel title="CandlestickChart Control" layout="vertical" color="0xffffff" borderAlpha="0.15" width="600" height="240"
 paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
 <mx:CandlestickChart id="candlestickchart" height="100%" width="100%" paddingRight="5" paddingLeft="5" 
 color="0x323232" showDataTips="true" dataProvider="{expensesAC}">
 <mx:verticalAxis>
 <mx:LinearAxis baseAtZero="false" />
 </mx:verticalAxis>
 <mx:horizontalAxis>
 <mx:CategoryAxis categoryField="Date" title="Date"/>
 </mx:horizontalAxis>
 <mx:series>
 <mx:CandlestickSeries openField="Open" highField="High" 
 lowField="Low" closeField="Close"/>
 </mx:series>
 </mx:CandlestickChart>
 </mx:Panel>
</mx:WindowedApplication>
ColumnChart.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
 horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
 <mx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 [Bindable]
 private var medalsAC:ArrayCollection = new ArrayCollection( [
 { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
 { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
 { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
 </mx:Script>
 <mx:Panel title="ColumnChart Control" layout="horizontal" color="0xffffff" borderAlpha="0.15" width="600" height="240"
 paddingTop="10" paddingRight="5" paddingBottom="10" paddingLeft="5" horizontalAlign="center">
 <mx:ColumnChart id="column" height="100%" color="0x323232"
 showDataTips="true" dataProvider="{medalsAC}">
 <mx:horizontalAxis>
 <mx:CategoryAxis categoryField="Country"/>
 </mx:horizontalAxis>
 <mx:series>
 <mx:ColumnSeries xField="Country" yField="Gold" displayName="Gold"/>
 <mx:ColumnSeries xField="Country" yField="Silver" displayName="Silver"/>
 <mx:ColumnSeries xField="Country" yField="Bronze" displayName="Bronze"/>
 </mx:series>
 </mx:ColumnChart>
 <mx:Legend dataProvider="{column}" color="0x323232"/>
 </mx:Panel>
</mx:WindowedApplication>
HLOCChart.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
 horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
 <mx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 [Bindable]
 private var stockDataAC:ArrayCollection = new ArrayCollection( [
 { Date: "25-Jul", Open: 40.55, High: 40.75, Low: 40.24, Close:40.31},
 { Date: "26-Jul", Open: 40.15, High: 40.78, Low: 39.97, Close:40.34},
 { Date: "27-Jul", Open: 40.38, High: 40.66, Low: 40, Close:40.63},
 { Date: "28-Jul", Open: 40.49, High: 40.99, Low: 40.3, Close:40.98},
 { Date: "29-Jul", Open: 40.13, High: 40.4, Low: 39.65, Close:39.95},
 { Date: "1-Aug", Open: 39.00, High: 39.50, Low: 38.7, Close:38.6}, 
 { Date: "2-Aug", Open: 38.68, High: 39.34, Low: 37.75, Close:38.84}, 
 { Date: "3-Aug", Open: 38.76, High: 38.76, Low: 38.03, Close:38.12}, 
 { Date: "4-Aug", Open: 37.98, High: 37.98, Low: 36.56, Close:36.69}, 
 { Date: "5-Aug", Open: 36.61, High: 37, Low: 36.48, Close:36.86} ]); 
 </mx:Script>
 <mx:Panel title="HLOCChart Control" layout="vertical" color="0xffffff" borderAlpha="0.15" width="600" height="240"
 paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
 <mx:HLOCChart id="hlocchart" height="100%" width="100%" paddingRight="5" paddingLeft="5"
 color="0x323232" showDataTips="true" dataProvider="{stockDataAC}">
 <mx:verticalAxis>
 <mx:LinearAxis baseAtZero="false" />
 </mx:verticalAxis>
 <mx:horizontalAxis>
 <mx:CategoryAxis categoryField="Date" title="Date" />
 </mx:horizontalAxis>
 <mx:series>
 <mx:HLOCSeries openField="Open" highField="High" 
 lowField="Low" closeField="Close"/>
 </mx:series>
 </mx:HLOCChart>
 </mx:Panel>
</mx:WindowedApplication>
LineChart.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
 horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
 <mx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 [Bindable]
 private var expensesAC:ArrayCollection = new ArrayCollection( [
 { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
 { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
 { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
 { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
 { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
 </mx:Script>
 <mx:Panel title="LineChart Control" layout="horizontal" color="0xffffff" borderAlpha="0.15" width="600" height="240"
 paddingTop="10" paddingRight="5" paddingBottom="10" paddingLeft="5" horizontalAlign="center">
 <mx:LineChart id="linechart" color="0x323232" height="100%"
 showDataTips="true" dataProvider="{expensesAC}">
 <mx:horizontalAxis>
 <mx:CategoryAxis categoryField="Month"/>
 </mx:horizontalAxis>
 <mx:series>
 <mx:LineSeries yField="Profit" form="curve" displayName="Profit"/>
 <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses"/>
 <mx:LineSeries yField="Amount" form="curve" displayName="Amount"/>
 </mx:series>
 </mx:LineChart>
 <mx:Legend dataProvider="{linechart}" color="0x323232"/>
 </mx:Panel>
</mx:WindowedApplication>
PieChart.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
 horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
 <mx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 [Bindable]
 private var medalsAC:ArrayCollection = new ArrayCollection( [
 { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
 { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
 { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
 private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
 var temp:String= (" " + percentValue).substr(0,6);
 return data.Country + ": " + '\n' + "Total Gold: " + data.Gold + '\n' + temp + "%";
 ]]>
 </mx:Script>
 <mx:Panel title="PieChart Control" layout="vertical" color="0xffffff" borderAlpha="0.15" height="240"
 paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
 <mx:PieChart id="chart" height="100%" width="100%" paddingRight="5" paddingLeft="5" color="0x323232"
 showDataTips="true" dataProvider="{medalsAC}" >
 <mx:series>
 <mx:PieSeries labelPosition="callout" field="Gold" labelFunction="displayGold">
 <mx:calloutStroke>
 <mx:Stroke weight="0" color="0x888888" alpha="1.0"/>
 </mx:calloutStroke>
 <mx:radialStroke>
 <mx:Stroke weight="0" color="#FFFFFF" alpha="0.20"/>
 </mx:radialStroke>
 <mx:stroke>
 <mx:Stroke color="0" alpha="0.20" weight="2"/>
 </mx:stroke>
 </mx:PieSeries>
 </mx:series>
 </mx:PieChart>
 </mx:Panel>
</mx:WindowedApplication>
PlotChart.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
 horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
 <mx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 [Bindable]
 private var expensesAC:ArrayCollection = new ArrayCollection( [
 { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
 { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
 { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 } ]);
 </mx:Script>
 <mx:Panel title="PlotChart Control" layout="horizontal" color="0xffffff" borderAlpha="0.15" width="600" height="240"
 paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
 <mx:PlotChart id="plot" height="100%" paddingLeft="5" paddingRight="5" color="0x323232"
 showDataTips="true" dataProvider="{expensesAC}">
 <mx:series>
 <mx:PlotSeries xField="Expenses" yField="Profit" displayName="Expenses/Profit"/>
 <mx:PlotSeries xField="Amount" yField="Expenses" displayName="Amount/Expenses"/>
 <mx:PlotSeries xField="Profit" yField="Amount" displayName="Profit/Amount"/>
 </mx:series>
 </mx:PlotChart>
 <mx:Legend dataProvider="{plot}" color="0x323232"/>
 </mx:Panel>
</mx:WindowedApplication>