<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="0" width="100%" creationPolicy="all" creationComplete="creationCompleteHandler()">
	
	<mx:Script>
		<![CDATA[
			import mx.charts.chartClasses.ChartBase;
			import mx.core.Container;
			import mx.charts.series.PieSeries;
			import mx.charts.series.BubbleSeries;
			import mx.charts.series.BarSeries;
			import mx.charts.series.ColumnSeries;
			import mx.charts.series.PlotSeries;
			import mx.charts.series.AreaSeries;
			import mx.charts.series.LineSeries;
			import mx.collections.ArrayCollection;
			import mx.collections.ListCollectionView;
			import mx.collections.Sort;
			
			[Bindable] public var controlBarHorizontalAlign:String = "center";
			[Bindable] public var dataProvider:ListCollectionView = new ListCollectionView;
			[Bindable] public var showDataTips:Boolean = true;
			
			[Bindable] public var xField:String = 'x';
			[Bindable] public var yField:String = 'y';
			[Bindable] public var zField:String = 'z';
			[Bindable] public var labelField:String = 'label';
			
			[Bindable] public var legendHeight:int = 80;
			[Bindable] public var legendDirection:String = "horizontal";
			
			public function creationCompleteHandler():void {
				this.refresh();
			}
			
			public function refresh():void {
				if( this.dataProvider.length > 0 ) {
					bindDataProvider();
				}
			}
			
			protected function bindDataProvider():void {
				
				if( this.lineChart.hasOwnProperty("series") == true ) {
					this.lineChart.series = new Array;
				}
				
				if( this.areaChart.hasOwnProperty("series") == true ) {
					this.areaChart.series = new Array;
				}
				
				if( this.plotChart.hasOwnProperty("series") == true ) {
					this.plotChart.series = new Array;
				}
				
				if( this.columnChart.hasOwnProperty("series") == true ) {
					this.columnChart.series = new Array;
				}
				
				if( this.barChart.hasOwnProperty("series") == true ) {
					this.barChart.series = new Array;
				}
				
				if( this.bubbleChart.hasOwnProperty("series") == true ) {
					this.bubbleChart.series = new Array;
				}
				
				var listCollectionView:ListCollectionView;
				var distinctXFieldValues:ArrayCollection = new ArrayCollection;
				
				for each( listCollectionView in this.dataProvider ) {
					var lineSeries:LineSeries = new LineSeries;
					var areaSeries:AreaSeries = new AreaSeries;
					var plotSeries:PlotSeries = new PlotSeries;
					var columnSeries:ColumnSeries = new ColumnSeries;
					var barSeries:BarSeries = new BarSeries;
					var bubbleSeries:BubbleSeries = new BubbleSeries;
					var pieSeries:PieSeries = new PieSeries;
					
					// Parse thru collection for distinct category axis values
					var object:Object;
					for each( object in listCollectionView) {
						if( distinctXFieldValues.contains(object[this.xField]) == false ) {
							distinctXFieldValues.addItem(object[this.xField]);
						}
					}
					
					lineSeries.dataProvider = listCollectionView;
					lineSeries.xField = this.xField;
					lineSeries.yField = this.yField;
					
					if( listCollectionView.getItemAt(0).hasOwnProperty(labelField) == true ) {
						lineSeries.displayName = listCollectionView.getItemAt(0)[labelField];
					}
					
					this.lineChart.series.push(lineSeries);
					
					areaSeries.dataProvider = listCollectionView;
					areaSeries.xField = this.xField;
					areaSeries.yField = this.yField;
					
					if( listCollectionView.getItemAt(0).hasOwnProperty(labelField) == true ) {
						areaSeries.displayName = listCollectionView.getItemAt(0)[labelField];
					}
					
					this.areaChart.series.push(areaSeries);
					
					plotSeries.dataProvider = listCollectionView;
					plotSeries.xField = this.xField;
					plotSeries.yField = this.yField;
					
					if( listCollectionView.getItemAt(0).hasOwnProperty(labelField) == true ) {
						plotSeries.displayName = listCollectionView.getItemAt(0)[labelField];
					}
					
					this.plotChart.series.push(plotSeries);
					
					columnSeries.dataProvider = listCollectionView;
					columnSeries.xField = this.xField;
					columnSeries.yField = this.yField;
					
					if( listCollectionView.getItemAt(0).hasOwnProperty(labelField) == true ) {
						columnSeries.displayName = listCollectionView.getItemAt(0)[labelField];
					}
					
					this.columnChart.series.push(columnSeries);
					
					barSeries.dataProvider = listCollectionView;
					barSeries.xField = this.yField;
					barSeries.yField = this.xField;
					
					if( listCollectionView.getItemAt(0).hasOwnProperty(labelField) == true ) {
						barSeries.displayName = listCollectionView.getItemAt(0)[labelField];
					}
					
					this.barChart.series.push(barSeries);
					
					bubbleSeries.dataProvider = listCollectionView;
					bubbleSeries.xField = this.xField;
					bubbleSeries.yField = this.yField;
					bubbleSeries.radiusField = this.zField;
					
					if( listCollectionView.getItemAt(0).hasOwnProperty(labelField) == true ) {
						bubbleSeries.displayName = listCollectionView.getItemAt(0)[labelField];
					}
					
					this.bubbleChart.series.push(bubbleSeries);
				}
				
				distinctXFieldValues.sort = new Sort;
				distinctXFieldValues.refresh();
				lineChartHorizontalCategoryAxis.dataProvider = distinctXFieldValues;
				areaChartHorizontalCategoryAxis.dataProvider = distinctXFieldValues;
				plotChartHorizontalCategoryAxis.dataProvider = distinctXFieldValues;
				columnChartHorizontalCategoryAxis.dataProvider = distinctXFieldValues;
				barChartVerticalCategoryAxis.dataProvider = distinctXFieldValues;
				bubbleChartHorizontalCategoryAxis.dataProvider = distinctXFieldValues;
			}
		]]>
	</mx:Script>
	
	<mx:ControlBar width="100%" horizontalAlign="{controlBarHorizontalAlign}">
		<mx:ToggleButtonBar dataProvider="chartViewStack" height="24"/>
	</mx:ControlBar>
	
	<mx:ViewStack id="chartViewStack" width="100%" height="100%">
		<mx:VBox icon="@Embed(source='images/chart_line.png')" width="100%" height="100%">
			<mx:LineChart id="lineChart" width="100%" height="100%" showDataTips="{this.showDataTips}" seriesFilters="{new Array}">
				<mx:verticalAxis>
					<mx:LinearAxis/>
				</mx:verticalAxis>
				<mx:horizontalAxis>
					<mx:CategoryAxis id="lineChartHorizontalCategoryAxis"/>
				</mx:horizontalAxis>
			</mx:LineChart>
		</mx:VBox>
		<mx:VBox icon="@Embed(source='images/chart_bubble.png')" width="100%" height="100%">
			<mx:BubbleChart id="bubbleChart" width="100%" height="100%" showDataTips="{this.showDataTips}">
				<mx:verticalAxis>
					<mx:LinearAxis/>
				</mx:verticalAxis>
				<mx:horizontalAxis>
					<mx:CategoryAxis id="bubbleChartHorizontalCategoryAxis"/>
				</mx:horizontalAxis>
			</mx:BubbleChart>
		</mx:VBox>
		<mx:VBox icon="@Embed(source='images/chart_area.png')" width="100%" height="100%">
			<mx:AreaChart id="areaChart" width="100%" height="100%" showDataTips="{this.showDataTips}">
				<mx:verticalAxis>
					<mx:LinearAxis/>
				</mx:verticalAxis>
				<mx:horizontalAxis>
					<mx:CategoryAxis id="areaChartHorizontalCategoryAxis"/>
				</mx:horizontalAxis>
			</mx:AreaChart>
		</mx:VBox>
		<mx:VBox icon="@Embed(source='images/chart_plot.png')" width="100%" height="100%">
			<mx:PlotChart id="plotChart" width="100%" height="100%" showDataTips="{this.showDataTips}">
				<mx:verticalAxis>
					<mx:LinearAxis/>
				</mx:verticalAxis>
				<mx:horizontalAxis>
					<mx:CategoryAxis id="plotChartHorizontalCategoryAxis"/>
				</mx:horizontalAxis>
			</mx:PlotChart>
		</mx:VBox>
		<mx:VBox icon="@Embed(source='images/chart_column.png')" width="100%" height="100%">
			<mx:ColumnChart id="columnChart" width="100%" height="100%" showDataTips="{this.showDataTips}">
				<mx:verticalAxis>
					<mx:LinearAxis/>
				</mx:verticalAxis>
				<mx:horizontalAxis>
					<mx:CategoryAxis id="columnChartHorizontalCategoryAxis"/>
				</mx:horizontalAxis>
			</mx:ColumnChart>
		</mx:VBox>
		<mx:VBox icon="@Embed(source='images/chart_bar.png')" width="100%" height="100%">
			<mx:BarChart id="barChart" width="100%" height="100%" showDataTips="{this.showDataTips}">
				<mx:verticalAxis>
					<mx:CategoryAxis id="barChartVerticalCategoryAxis"/>
				</mx:verticalAxis>
				<mx:horizontalAxis>
					<mx:LinearAxis/>
				</mx:horizontalAxis>
			</mx:BarChart>
		</mx:VBox>
	</mx:ViewStack>
	
	<mx:Legend width="100%" height="{legendHeight}" direction="{legendDirection}" dataProvider="{ChartBase(Container(chartViewStack.selectedChild).getChildAt(0))}"/>
	
</mx:Panel>