Switch through RadioButton In Flex

1. Page Switching

<? Xml version = "1.0" encoding = "UTF-8"?> <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 "width =" 100% "height =" 100% "> <s: layout> <s: BasicLayout/> </s: layout> <fx: Declarations> <! -- Place non-visual elements (such as services and value objects) Here --> </fx: Declarations> <fx: Script> <! [CDATA [import mx. collections. arrayCollection;/**** data source binding */[Bindable] private var chartArray: ArrayCollection = new ArrayCollection ([{week: "Monday", apple: "451245", orange: "894544", peach: "451245" },{ week: "Tuesday", apple: "985444", orange: "745445", peach: "989565" },{ week: "Wednesday", apple: "124544", orange: "323565", peach: "323121" },{ week: "Thursday", apple: "895645", orange: "201212", peach: "542121" },{ week: "Friday", apple: "325645", orange: "564545", peach: "656454" },{ week: "Saturday", apple: "564512", orange: "784545", peach: "845455" },{ week: "Sunday", apple: "784545", orange: "656232", peach: "124545"}]);/*** RadioButton Click event */protected function clickHandler (Event: event): void {if (radio_column.enabled) {column. height = 450; line. height = 0;} else if (radio_line.enabled) {column. height = 0; line. height = 450; }}]]> </fx: Script> <mx: VBox id = "vbox" width = "100%" height = "100%"> <mx: VBox id = "column_chart" width = "100%" height = "80%" paddingLeft = "10" paddingRight = "10" paddingTop = "10"> <mx: columnChart id = "column" showDataTips = "true" dataProvider = "{chartArray}" width = "100%" height = "450"> <mx: horizontalAxis> <mx: categoryAxis categoryField = "week" displayName = ""/> </mx: horizontalAxis> <mx: series> <mx: columnSeries displayName = "apple" xField = "week" yField = "apple"/> <mx: columnSeries displayName = "orange" xField = "week" yField = "orange"/> <mx: columnSeries displayName = "peach" xField = "week" yField = "peach"/> </mx: series> </mx: ColumnChart> <mx: legend dataProvider = "{column}"/> </mx: VBox> <mx: VBox id = "line_chart" width = "100%" height = "0" paddingLeft = "10" paddingRight = "10" paddingTop = "10"> <mx: lineChart id = "line" showDataTips = "true" dataProvider = "{chartArray}" width = "100%" height = "100%"> <mx: horizontalAxis> <mx: categoryAxis categoryField = "week" displayName = ""/> </mx: horizontalAxis> <mx: series> <mx: lineSeries displayName = "apple" xField = "week" yField = "apple"/> <mx: lineSeries displayName = "orange" xField = "week" yField = "orange"/> <mx: lineSeries displayName = "peach" xField = "week" yField = "peach"/> </mx: series> </mx: LineChart> <mx: legend dataProvider = "{line}"/> </mx: VBox> <mx: HBox width = "100%" height = "30"> <mx: radioButton id = "radio_column" name = "chart" label = "Bar chart" click = "clickHandler (event)"/> <mx: radioButton id = "radio_line" name = "chart" label = "line chart" change = "clickHandler (event)"/> </mx: HBox> </mx: VBox> </s: Application>

2. Page results