<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" backgroundColor="0xFFFFFF">
<mx:Script>
<![CDATA[
[Bindable] public var chartDP:Array = [
{day:'Monday',rainfall:10,elevation:100,temperature:78},
{day:'Tuesday',rainfall:7,elevation:220,temperature:66},
{day:'Wednesday',rainfall:5,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}
];
private function changeSelectedIndex(offset:int):void
{
barSeries.selectedIndex+=offset;
onSelectionChange();
}
private function onSelectionChange():void
{
// programmatic changes to chart selection don't fire a Change event, so we need to manually reset
// the dataProvider of our detail grid when we programatically changethe selection
detailGrid.dataProvider =barChart.selectedChartItems;
}

]]>
</mx:Script>
<!-- use the change event to set the dataProvider of our detail grid to our chart'
s selected items -->
<mx:BarChart id="barChart" dataProvider="{chartDP}"
selectionMode="multiple" change="onSelectionChange()">
<mx:verticalAxis>
<mx:CategoryAxis
dataProvider="{chartDP}"
categoryField="day" />
</mx:verticalAxis>
<mx:series>
<mx:BarSeries id="barSeries" selectedIndex="0"
yField="day" xField="rainfall"
displayName="day" />
</mx:series>
</mx:BarChart>
<mx:HBox>
<mx:Button click="changeSelectedIndex(1)" label="Previous" />
<mx:Button click="changeSelectedIndex(-1)" label="Next" />
</mx:HBox>
<mx:DataGrid id="detailGrid" >
<mx:columns>
<mx:DataGridColumn dataField="xValue"
headerText="rainfall" />
<mx:DataGridColumn dataField="yValue" headerText="day" />
</mx:columns>
</mx:DataGrid>
</mx:Application>