Flex Practice: Simple application of various charts __flex

Today took the time to learn a chart application, found that the flex chart is really very powerful, here to summarize the application of different charts

<mx:application xmlns:mx= "Http://www.adobe.com/2006/mxml" layout= "Absolute"
Backgroundcolor= "0xFFFFFF" backgroundgradientalphas= "[1.0, 1.0]" backgroundgradientcolors= "[#E8D1F9, #E8D1F9]" Fontsize= ">"
<mx:Script>
<! [cdata[
A basic data set
[bindable] public var chartdp:array = [
{day: ' Monday ', rainfall:10,elevation:100,temperature:78},
{day: ' Tuesday ', rainfall:7,elevation:220,temperature:66},
{day: ' Wednesday ', rainfall:1,elevation:540,temperature:55},
{day: ' Thursday ', rainfall:8,elevation:60,temperature:84},
{day: ' Friday ', rainfall:11,elevation:390,temperature:52},
{day: ' Saturday ', rainfall:12,elevation:790,temperature:45},
{day: ' Sunday ', rainfall:14,elevation:1220,temperature:24}
];

[bindable] public var chartdp2:array = [
{day: ' Monday2 ', rainfall:10,elevation:50,temperature:56},
{day: ' Tuesday2 ', rainfall:7,elevation:227,temperature:88},
{day: ' Wednesday2 ', rainfall:1,elevation:64,temperature:55},
{day: ' Thursday2 ', rainfall:8,elevation:89,temperature:80},
{day: ' Friday2 ', rainfall:11,elevation:370,temperature:65},
{day: ' Saturday2 ', rainfall:12,elevation:730,temperature:40},
{day: ' Sunday2 ', rainfall:14,elevation:128,temperature:34}
];

public var ticker:array = [
{Date: "1-aug-05", open:42.57,high:43.08,low:42.08,close:42.75},
{Date: "2-aug-05", open:42.89,high:43.5,low:42.61,close:43.19},
{Date: "3-aug-05", open:43.19,high:43.31,low:42.77,close:43.22},
{Date: "4-aug-05", open:42.89,high:43,low:42.29,close:42.71},
{Date: "5-aug-05", open:42.49,high:43.36,low:42.02,close:42.99},
{Date: "8-aug-05", open:43,high:43.25,low:42.61,close:42.65},
{Date: "9-aug-05", open:42.93,high:43.89,low:42.91,close:43.82},
{Date: "10-aug-05", open:44,high:44.39,low:43.31,close:43.38},
{Date: "11-aug-05", open:43.39,high:44.12,low:43.25,close:44},
{Date: "12-aug-05", open:43.46,high:46.22,low:43.36,close:46.1}
];

public var dge:array = new Array ();
]]>
</mx:Script>
<mx:togglebuttonbar dataprovider= "{simplecharts}"
direction= "Horizontal" y= "horizontalcenter=" "/>"
<mx:viewstack id= "Simplecharts" x= "5" y= "the" width= "100%" >
<mx:canvas label= "Barchart" width= "100%" >
<mx:barchart dataprovider= "{CHARTDP}" width= "100%" >
<mx:verticalAxis>
<mx:categoryaxis
Dataprovider= "{CHARTDP}"
Categoryfield= "Day"/>
</mx:verticalAxis>
<mx:series>
<mx:barseries
Yfield= "Day" xfield= "rainfall"
Displayname= "Rainfall"/>
</mx:series>
</mx:BarChart>
</mx:Canvas>

<mx:canvas label= "Piechart" width= "100%" >
<mx:piechart dataprovider= "{CHARTDP}" width= "100%" >
<mx:series>
<mx:pieseries
field= "Rainfall"
Namefield= "Day"
Labelposition= "Inside"
Displayname= "Rainfall"/>
</mx:series>
</mx:PieChart>
</mx:Canvas>

<mx:canvas label= "Columnchart" width= "100%" >
<mx:columnchart dataprovider= "{CHARTDP}" width= "100%" >
<mx:horizontalAxis>
<mx:categoryaxis id= "Ca"
Categoryfield= "Day"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:linearaxis baseatzero= ' {false} ' autoadjust= ' {true} '/>
</mx:verticalAxis>
<mx:series>
<mx:columnseries xfield= "Day" yfield= "rainfall" displayname= "rainfall"/>
</mx:series>
</mx:ColumnChart>
</mx:Canvas>

<mx:canvas label= "Linechart" width= "100%" >
<mx:linechart dataprovider= "{CHARTDP}" showdatatips= "true" width= "100%" >
<mx:horizontalAxis>
<mx:categoryaxis
Categoryfield= "Day"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:linearaxis baseatzero= ' {false} ' autoadjust= ' {true} '/>
</mx:verticalAxis>
<mx:series>
<mx:lineseries yfield= "Rainfall" displayname= "rainfall"/>
<mx:lineseries yfield= "Temperature" displayname= "Temperature"/>
</mx:series>
</mx:LineChart>
</mx:Canvas>

<mx:canvas label= "Bubblechart" width= "100%" >
<mx:bubblechart showdatatips= "true" width= "100%" backgroundelements= "{dge}" >
<mx:series>
<mx:bubbleseries xfield= "Rainfall" yfield= "Temperature" radiusfield= "Temperature" displayName= "rainfall" Dataprovider= "{CHARTDP}"/>
<mx:bubbleseries xfield= "Rainfall" yfield= "Temperature" radiusfield= "Temperature" displayName= "Rainfall2" Dataprovider= "{chartDP2}"/>
</mx:series>
</mx:BubbleChart>
</mx:Canvas>

<mx:canvas label= "Candlelistchart" width= "100%" >
<mx:candlestickchart dataprovider= "{ticker}" showdatatips= "true" width= "100%" >
<mx:series>
<mx:candlestickseries
openfield= "Open"
Highfield= "High"
lowfield= "Low"
Closefield= "Close"
Displayname= "Ticker"/>
</mx:series>
</mx:CandlestickChart>
</mx:Canvas>
</mx:ViewStack>
</mx:Application>

The results of the operation will not be posted, interested friends to run their own to see it ....