Demo

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” xmlns:ns1=”com.fusioncharts.components.*” viewSourceURL=”srcview/index.html”>
<mx:VBox paddingTop=”20″>
<mx:Text paddingLeft=”40″ text=”FusionCharts for Flex” fontSize=”16″ fontWeight=”bold”/>
<mx:Text paddingLeft=”40″ text=”Mortgage Calculator” fontSize=”14″ fontWeight=”bold” color=”#FFFFFF”/>
<mx:HBox paddingTop=”10″ paddingLeft=”40″>
<mx:VBox>
<mx:Panel title=”Mortgage Information”>
<mx:Form id=”myForm1″ width=”350″ paddingTop=”20″ paddingBottom=”20″>
<mx:FormItem label=”Mortgage Amount”>
<mx:TextInput id=”mor_am” width=”100%” restrict=”0-9″ text=”20000″ focusOut=”error(event)”/>
</mx:FormItem>
<mx:FormItem label=”Term(in years)”>
<mx:NumericStepper id=”num_step” maximum=”200″ value=”5″ minimum=”1″/>
</mx:FormItem>
<mx:FormItem label=”Interest rate”>
<mx:TextInput id=”int_rate” width=”100%” restrict=”0-9″ text=”6″ focusOut=”error(event)”/>
</mx:FormItem>
</mx:Form>
</mx:Panel>
<mx:Panel title=”Tax / Insurance”>
<mx:Form id=”myForm2″ width=”350″ paddingTop=”20″ paddingBottom=”20″>
<mx:FormItem label=”Annual Property tax”>
<mx:TextInput id=”ann_prop_tax” width=”100%” restrict=”0-9″ text=”2400″ focusOut=”error(event)”/>
</mx:FormItem>
<mx:FormItem label=”Annual Home Insurance”>
<mx:TextInput id=”ann_hom_ins” width=”100%” restrict=”0-9″ text=”600″ focusOut=”error(event)”/>
</mx:FormItem>
</mx:Form>
</mx:Panel>
<mx:Panel title=”Per – Payment”>
<mx:Form id=”myForm3″ width=”350″ paddingTop=”20″ paddingBottom=”20″>
<mx:FormItem label=”Amount”>
<mx:TextInput id=”pre_am” width=”100%” restrict=”0-9″ text=”1000″ focusOut=”error(event)”/>
</mx:FormItem>
<mx:FormItem label=”Start with payment”>
<mx:TextInput id=”st_with_pay” width=”100%” restrict=”0-9″ text=”200″ focusOut=”error(event)”/>
</mx:FormItem>
<mx:FormItem label=”End with payment”>
<mx:TextInput id=”end_with_pay” width=”100%” restrict=”0-9″ text=”50″ focusOut=”error(event)”/>
</mx:FormItem>
<mx:FormItem>
<mx:HBox>
<mx:Button label=”Calculate” id=”calc_butt” click=”calculation()” />
<mx:Button label=”Reset” id=”reset_butt” enabled=”false” click=”reset()” />
</mx:HBox>

</mx:FormItem>
</mx:Form>
</mx:Panel>
</mx:VBox>
<mx:VBox>
<mx:Panel title=”Results” width=”460″ height=”230″>
<mx:VBox width=”100%”>
<mx:HBox paddingTop=”5″  width=”100%”>
<mx:Text fontSize=”12″ fontWeight=”bold” text=”Monthly Payment” width=”100%” textAlign=”center”/>
<mx:Text fontSize=”12″ fontWeight=”bold” text=”Number of Payment” width=”100%” textAlign=”center”/>
<mx:Text fontSize=”12″ fontWeight=”bold” text=”Monthly Payment” width=”100%” textAlign=”center”/>
</mx:HBox>
<mx:HBox  width=”100%”>
<mx:Text id=”mon_pay_1″ textAlign=”center” width=”100%” color=”#0000FF”/>
<mx:Text id=”num_pay” textAlign=”center” width=”100%” color=”#0000FF”/>
<mx:Text id=”mon_pay_2″ textAlign=”center” width=”100%” color=”#0000FF”/>
</mx:HBox>
</mx:VBox>
<mx:ControlBar>
<mx:DataGrid id=”grid” width=”100%” dataProvider=”{_data}” height=”120″>
<mx:columns>
<mx:DataGridColumn headerText=”Months” dataField=”mon”/>
<mx:DataGridColumn headerText=”Payments” dataField=”pay”/>
<mx:DataGridColumn headerText=”Principle” dataField=”prin”/>
<mx:DataGridColumn headerText=”Interest” dataField=”int”/>
<mx:DataGridColumn headerText=”PrePayment” dataField=”pre”/>
<mx:DataGridColumn headerText=”Balance” dataField=”bal”/>
</mx:columns>
</mx:DataGrid>
</mx:ControlBar>
</mx:Panel>
<mx:Panel title=”Chart” width=”460″ height=”250″>
<!– Creating FusionCharts component. Default width and height of the component is 400 and 300
respectively. Here the width required is more than default width so we have given 100% and
as the height required is less than default height, we manually specified the height as 174.
No data provided first as we are waiting for the calculation. Hence a message is provided by
changing the ‘LoadDataErrorText’ property –>
<ns1:FusionCharts id=”fc” width=”100%” height=”174″ FCChartType=”ScrollColumn2D” FCRenderEvent=”rendered(event)” FCDataXML=”.”>
<ns1:FCChartData ChartNoDataText=”Please enter data and click on Calculate button”/>
</ns1:FusionCharts>
<mx:ControlBar>
<mx:HBox horizontalAlign=”right” width=”100%”>
<mx:Text text=”Select chart type:”/>
<mx:ComboBox id=”chart_combo” change=”change_chart(event)” enabled=”false”>
<mx:ArrayCollection>
<mx:Object label=”Column Chart” value=’ScrollColumn2D’/>
<mx:Object label=”Line Chart” value=’ScrollLine2D’/>
<mx:Object label=”Area Chart” value=’ScrollArea2D’/>
</mx:ArrayCollection>
</mx:ComboBox>
</mx:HBox>
</mx:ControlBar>
</mx:Panel>
</mx:VBox>
</mx:HBox>
</mx:VBox>
<mx:Script>
<![CDATA[
// Importing classes
import mx.collections.ArrayCollection;
import mx.controls.Alert;
// variables required for calculation
private var printPay:Number;
private var printPaymnt:Number;
private var printEndpmnt:Number;
private var printStpmnt:Number;
// This array is for storing calculation results
private var dataSave:Array=new Array();
// This ArrayCollection object is the main data source for the Datagrid
[Bindable]
private var _data:ArrayCollection=new ArrayCollection();
// This ArrayCollection object is the data source for building chart
//[Bindable]
private var _chartData:ArrayCollection=new ArrayCollection();
// This ArrayCollection object provide chart parameters to chart
//[Bindable]
private var _chartParam:ArrayCollection=new ArrayCollection([
{xAxisName:'Months'},
{yAxisName:'Amount'},
{showShadow:'1'},
{useRoundEdges:'1'},
{numVisiblePlot:'10'},
{plotGradientColor:''},
{legendPosition:'RIGHT'},
{showValues:'0'}]);
// Function invoked when chart type get changed by selecting conbo-box
private function change_chart(e:Event):void{
// Changing chart type by FCChartType property
// Calling FCrender function to take effect visually with a blank data.
fc.FCChartType=e.currentTarget.selectedItem.value;
var temp:ArrayCollection=new ArrayCollection([]);
fc.FCData(temp);
fc.FCRender();
//fc.FCChartType=e.currentTarget.selectedItem.value;
//fc.FCData(_chartData);
//fc.FCRender();}
private function rendered(e:Event):void{
fc.FCData(_chartData);
fc.FCParams(_chartParam);
fc.FCRender();}
// Restricting text fields to get blank values.
// A message box will pop-up indicating the error
private function error(e:Event):void{
if(e.currentTarget.text==”"){
Alert.show(“Please provide value  !”);
e.currentTarget.setFocus();}}
// Entire scenerio will be reset to its initial values by pressing ‘Reset’ button
private function reset():void{
mor_am.text=”20000″;
num_step.value=5;
int_rate.text=”6″;
ann_prop_tax.text=”2400″;
ann_hom_ins.text=”600″;
pre_am.text=”1000″;
st_with_pay.text=”200″;
end_with_pay.text=”50″;
calculation();}
// Calculation starts here by clicking on ‘Calculate’ button
private function calculation():void{
chart_combo.enabled=true;
reset_butt.enabled=true;
_data.removeAll();
dataSave=[];
_chartData.removeAll();
//If the ‘starting payment’ is too low, we are generating alert
if(Number(st_with_pay.text)<(Number(mor_am.text)/100))    {
Alert.show(“Value must be 1% of mortgage amount or higher  !”);
return;}
var outputretn:Array = new Array();
var pay:Number = getPayment(Number(mor_am.text), Number(num_step.value), Number(int_rate.text));
printPay = pay;
var end:Number = getAmortization(Number(mor_am.text), Number(num_step.value), Number(int_rate.text), pay, Number(st_with_pay.text), Number(end_with_pay.text), Number(pre_am.text));
end = (Math.round(end*100)/100);
var lstpamnt:Number = end;
var mpayment:Number = pay;
var mpaymmentpiti:Number = ((Math.round(pay*100)/100)+(Math.round(Number(ann_prop_tax.text)*100)/1200)+(Math.round(Number(ann_hom_ins.text)*100)/1200));
outputretn[0] = (Math.round(mpayment*Math.pow(10, 2))/Math.pow(10, 2));
outputretn[1] = (Math.round(lstpamnt*Math.pow(10, 2))/Math.pow(10, 2));
outputretn[2] = (Math.round(mpaymmentpiti*Math.pow(10, 2))/Math.pow(10, 2));
// Monthly payment output
mon_pay_1.text=outputretn[0].toString();
// Number of Payment output
num_pay.text=(outputretn[1].toString()!=”NaN”)?outputretn[1].toString():”0″;
// Monthly payment output
mon_pay_2.text=outputretn[2].toString();
printAmortization(Number(mor_am.text), Number(num_step.value), Number(int_rate.text));
// Calling this function to creat chart
creat_chart();}
private function getPayment(amount:Number, term:Number, interestRate:Number):Number{
var term:Number = term*12;
var acc:Number = 0;
var base:Number = 1+interestRate/1200;
for (var i:Number = 1; i<=term; i++){
acc += Math.pow(base, -i);}
return amount/acc;}
private function getAmortization(amount:Number, term:Number, interestRate:Number, calPay:Number, stpmnt:Number, endtpmnt:Number, preamount:Number):Number{
var term:Number = term*12;
var parseStpmnt:Number = stpmnt;
printStpmnt = parseStpmnt;
var parseEndpmnt:Number = endtpmnt;
printEndpmnt = parseEndpmnt;
var paymnt:Number = preamount;
printPaymnt = paymnt;
var payment:Number = calPay;
var balance:Number = amount;
var interest:Number = 0.0;
var principal:Number = 0.0;
var totalinterest:Number = 0.0;
var endperiod:Number;
for (var i:Number = 1; i<=term; i++){
interest = balance*interestRate/1200;
totalinterest += interest;
if (i>=parseStpmnt && i<=parseEndpmnt){
principal = payment-interest;
balance -= principal;
balance = balance-paymnt;}
else{
principal = payment-interest;
balance -= principal;
if (balance<=0 || i == term){
endperiod = i;
break;}}}
return endperiod;}
private function printAmortization(amount:Number, term:Number, interestRate:Number):void{
var term:Number = term*12;
var payment:Number = printPay;
var balance:Number = amount;
var interest:Number = 0.0;
var principal:Number = 0.0;
var totalinterest:Number = 0.0;
var endperiod:Number;
for (var i:Number = 1; i<=term; i++) {
var save:Object = new Object();
var paymnt:Number = printPaymnt;
interest = balance*interestRate/1200;
totalinterest += interest;
if (i>=printStpmnt && i<=printEndpmnt) {
principal = payment-interest;
balance -= principal;
balance = balance-paymnt;
save.months = i;
save.payment = (Math.round(payment*100)/100);
save.principal = (Math.round(principal*100)/100);
save.interest = (Math.round(interest*100)/100);
save.paymnt = (Math.round(paymnt*100)/100);
save.balance = (Math.round(balance*100)/100);
dataSave.push(save);
} else {
paymnt = 0;
principal = payment-interest;
balance -= principal;
save.months = i;
save.payment = (Math.round(payment*100)/100);
save.principal = (Math.round(principal*100)/100);
save.interest = (Math.round(interest*100)/100);
save.paymnt = (Math.round(paymnt*100)/100);
save.balance = (Math.round(balance*100)/100);
dataSave.push(save);}
if (balance<=0 || i == term || balance == Number.POSITIVE_INFINITY) {
endperiod = i;
break;}}
// Adding data to ‘_data’ ArrayCollection object to bulid the Datagrid
for (var n:Number = 0; n<dataSave.length; n++){
_data.addItem({mon:dataSave[n].months, pay:dataSave[n].payment, prin:dataSave[n].principal, int:dataSave[n].interest, pre:dataSave[n].paymnt, bal:dataSave[n].balance});}
// Number of Payment output
//num_pay.text=dataSave.length.toString();}
// Main function for building chart
private function creat_chart():void{
// Here we are creating the data source for chart as ArrayCollection datatype
// Adding data to ‘_chartData’ ArrayCollection object as ‘Label’ element
for (var i:Number = 0; i<dataSave.length; i++){
_chartData.addItem({label:dataSave[i].months});}
// Providing Series name
_chartData.addItem({seriesName:’Amount’});
// Adding data to ‘_chartData’ ArrayCollection object as ‘Value’ element
for (var j:Number = 0; j<dataSave.length; j++){
_chartData.addItem({value:dataSave[j].principal});}
// Providing another Series name
_chartData.addItem({seriesName:’Interest’});
// Adding data to ‘_chartData’ ArrayCollection object as ‘Value’ element
for (var k:Number = 0; k<dataSave.length; k++){
_chartData.addItem({value:dataSave[k].interest});}
// Providing data for the chart as ArrayCollection datatype by calling FCData function.
// Providing parameters for the chart as ArrayCollection datatype by calling FCParams function.
// Calling FCrender function to take effect visually.
fc.FCData(_chartData);
fc.FCParams(_chartParam);
fc.FCRender();
//Alert.show(_chartData.length.toString());
}
]]></mx:Script>
</mx:Application>

WaterfallChart

<?xml version=”1.0″?>
<!– charts/WaterfallStacked.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month:"2005", top:25, middle:20, bottom:17, Invisible:0},
{Month:"Jan", top:14, middle:12, bottom:10, Invisible:62},
{Month:"Feb", top:8, middle:6, bottom:4, Invisible:98},
{Month:"Mar", top:6, middle:5, bottom:5, Invisible:116},
{Month:"Apr", top:5, middle:4, bottom:4, Invisible:132},
{Month:"May", top:5, middle:3, bottom:5, Invisible:140},
{Month:"Jun", top:4, middle:3, bottom:2, Invisible:155},
{Month:"2006", top:68, middle:57, bottom:39, Invisible:0}
]);
]]></mx:Script>
<mx:Panel title=”Stacked Waterfall”>
<mx:ColumnChart id=”myChart”
dataProvider=”{expenses}”
columnWidthRatio=”1″
showDataTips=”true”
type=”stacked”>
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider=”{expenses}”
categoryField=”Month” />
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
yField=”Invisible”
displayName=”Invisible”>
<mx:fill>
<!–Set alpha to 0 to hide invisible column.–>
<mx:SolidColor color=”0xFFFFFF” alpha=”0″/>
</mx:fill>
</mx:ColumnSeries>
<mx:ColumnSeries yField=”bottom” displayName=”Profit”/>
<mx:ColumnSeries yField=”middle” displayName=”Expenses”/>
<mx:ColumnSeries yField=”top” displayName=”Profit”/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider=”{myChart}”/>
</mx:Panel>
</mx:Application>

HLOCChart

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application 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=”0×323232″ 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:Application>

PieChart

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application 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+& apos;\n&apos;+”Total Gold: “+ data.Gold + &apos;\n&apos;+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=”0×323232″
showDataTips=”true” dataProvider=”{medalsAC}” >
<mx:series>
<mx:PieSeries labelPosition=”callout” field=”Gold”>
<mx:calloutStroke>
<mx:Stroke weight=”0″ color=”0×888888″ 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:Application>

CandlestickChart

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application 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=”0×323232″ 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:Application>

BarChart

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application 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=”0×323232″
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=”0×323232″/>
</mx:Panel>
</mx:Application>

PlotChart

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application 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=”0×323232″
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=”0×323232″/>
</mx:Panel>
</mx:Application>

ColumnChart

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application 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=”0×323232″
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=”0×323232″/>
</mx:Panel>
</mx:Application>

BubbleChart

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application 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>
BubbleChart { color:#000099; }
</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=”bubblechrt” height=”100%” width=”100%” paddingRight=”5″ paddingLeft=”5″ color=”0×323232″
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=”0×323232″/>
</mx:Panel>
</mx:Application>

AreaChart

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application 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=”0×323232″ 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=”0×323232″/>
</mx:Panel>
</mx:Application>