<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Script>

import mx.collections.ArrayCollection;

[Bindable]

private var market1:ArrayCollection = new ArrayCollection( [

{ Date: "25-Jan", Open: 40.75, High: 40.75, Low: 40.24, Close:40.31},

{ Date: "26-Jan", Open: 39.98, High: 40.78, Low: 39.97, Close:40.34},

{ Date: "27-Jan", Open: 40.38, High: 40.66, Low: 40, Close:40.63},

{ Date: "28-Jan", Open: 40.49, High: 40.99, Low: 40.3, Close:40.98},

{ Date: "29-Jan", Open: 40.13, High: 40.4, Low: 39.65, Close:39.95},

{ Date: "1-Feb", Open: 39.00, High: 39.50, Low: 38.7, Close:38.6},

{ Date: "2-Feb", Open: 38.68, High: 39.34, Low: 37.75, Close:38.84},

{ Date: "3-Feb", Open: 38.76, High: 38.76, Low: 38.03, Close:38.12},

{ Date: "4-Feb", Open: 37.98, High: 37.98, Low: 36.56, Close:36.69},

{ Date: "5-Feb", Open: 36.61, High: 37, Low: 36.48, Close:36.86} ]);

[Bindable]

private var market2:ArrayCollection = new ArrayCollection( [

{ Date: "25-Jan", Open: 18.50, High: 19, Low: 18.48, Close:18.86},

{ Date: "26-Jan", Open: 19.56, High: 19.98, Low: 18.6, Close:18.69},

{ Date: "27-Jan", Open: 20.81, High: 20.99, Low: 20.03, Close:20.12},

{ Date: "28-Jan", Open: 20.70, High: 21.00, Low: 19.5, Close:20.84},

{ Date: "29-Jan", Open: 21.7, High: 21.79, Low: 20.45, Close:20.6},

{ Date: "1-Feb", Open: 22.45, High: 22.65, Low: 21.65, Close:21.95},

{ Date: "2-Feb", Open: 22.56, High: 22.6, Low: 22.05, Close:22.98},

{ Date: "3-Feb", Open: 22.42, High: 22.70, Low: 22.1, Close:22.63},

{ Date: "4-Feb", Open: 21.67, High: 22.82, Low: 21.67, Close:22.34},

{ Date: "5-Feb", Open: 22.44, High: 22.85, Low: 22.12, Close:22.31} ]);

</fx:Script>

<fx:Declarations>

<mx:SeriesSlide id="interpolate" duration="1500"/>

</fx:Declarations>

<s:Panel title="CandleStickChart Control Example" width="677" height="469">

<s:layout>

<s:HorizontalLayout/>

</s:layout>

<mx:CandlestickChart id="candlestickchart1"

paddingRight="10"

paddingLeft="10"

paddingBottom="10"

paddingTop="10"

showDataTips="true"

dataProvider="{market1}" width="558" height="429">

<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"

displayName="Date"

showDataEffect="{interpolate}">

<mx:fill>

<mx:SolidColor color="green"/>

</mx:fill>

<mx:declineFill>

<mx:SolidColor color="red"/>

</mx:declineFill>

<mx:stroke>

<mx:SolidColorStroke weight="2" color="black"/>

</mx:stroke>

</mx:CandlestickSeries>

</mx:series>

</mx:CandlestickChart>

<s:VGroup>

<mx:Legend dataProvider="{candlestickchart1}"/>

<s:RadioButton groupName="sel" label="First Market"

selected="true" click="candlestickchart1.dataProvider=market1;"/>

<s:RadioButton groupName="sel" label="Second Market"

click="candlestickchart1.dataProvider=market2;"/>

</s:VGroup>

</s:Panel>