The following sections cover some of the more advanced features of Flex charting. These include chart events, drill-down charts, mixed series types, multiple-axis charts, and axis label rotation. Chart Events Chart components, like most Flex components, broadcast events with user interaction. These include click, double click, mouse down, mouse move, mouse up, item roll out, and item roll over. Listing 10-11 shows the event and the values of the data column that triggered the event. The sample code has the click and double click events active, with the others commented out. Run the code and uncomment the other events to see how each one is broadcast.
<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
creationComplete=”initApp()” backgroundColor=”#FFFFFF”>
<mx:Script>
<![CDATA[v
import mx.collections.ArrayCollection;
import mx.charts.events.ChartItemEvent;
private var chartData:ChartData = new ChartData();
[Bindable]
private var productSales:ArrayCollection;
[Bindable]
private var logData:String;
// Event handler
public function myListener(e:ChartItemEvent):void {
logData = logData + “\nEvent: ” + e.type + “\n Gizmos: ” +
e.hitData.item.Gizmos
+ ” Widgets: ” + e.hitData.item.Widgets + ” Gadgets: ” + e.hitData.item.Gadgets
+ “\n”;
eventLog.verticalScrollPosition=eventLog.verticalScrollPosition+100;
}
// Define event listeners.
private function initApp():void {
productSales = chartData.getDataSet1();
columnChart.addEventListener(ChartItemEvent.ITEM_CLICK,myListener);
columnChart.addEventListener(ChartItemEvent.ITEM_DOUBLE_CLICK,myListener);
//columnChart.addEventListener(ChartItemEvent.ITEM_MOUSE_DOWN,myListener);
//columnChart.addEventListener(ChartItemEvent.ITEM_MOUSE_MOVE,myListener);
//columnChart.addEventListener(ChartItemEvent.ITEM_MOUSE_UP,myListener);
//columnChart.addEventListener(ChartItemEvent.ITEM_ROLL_OUT,myListener);
//columnChart.addEventListener(ChartItemEvent.ITEM_ROLL_OVER,myListener);
}
]]>
</mx:Script>
<mx:Panel title=”ColumnChart Event Example (RollOver, Click, or DoubleClick)”
width=”700″ height=”400″
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″
layout=”horizontal”>
<mx:ColumnChart id=”columnChart” height=”100%” width=”100%”
paddingLeft=”5″ paddingRight=”5″
showDataTips=”true” dataProvider=”{productSales}” doubleClickEnabled=
“true”>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField=”Quarter”/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries xField=”Quarter” yField=”Gizmos” displayName=”Gizmos”/>
<mx:ColumnSeries xField=”Quarter” yField=”Widgets” displayName=”Widgets”/>
<mx:ColumnSeries xField=”Quarter” yField=”Gadgets” displayName=”Gadgets”/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider=”{columnChart}”/>
<mx:TextArea id=”eventLog” text=”{logData}” width=”300″ height=”100%”/>
</mx:Panel>
</mx:Application>
