The following example shows how you can toggle data tips on a Flex PieChart control by setting the showDataTips
property.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/09/13/toggling-data-tips-on-a-piechart-in-flex/ --> <mx:Application name="PieChart_showDataTips_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:XMLListCollection id="dp"> <mx:source> <mx:XMLList> <product label="Product 1" data="3" /> <product label="Product 2" data="1" /> <product label="Product 3" data="4" /> <product label="Product 4" data="1" /> <product label="Product 5" data="5" /> <product label="Product 6" data="9" /> </mx:XMLList> </mx:source> </mx:XMLListCollection> <mx:ApplicationControlBar dock="true"> <mx:CheckBox id="checkBox" label="showDataTips:" labelPlacement="left" selected="true" /> </mx:ApplicationControlBar> <mx:Panel styleName="opaquePanel" width="100%" height="100%"> <mx:PieChart id="pieChart" dataProvider="{dp}" showDataTips="{checkBox.selected}" height="100%" width="100%"> <mx:series> <mx:PieSeries id="pieSeries" field="@data" nameField="@label" filters="[]" /> </mx:series> </mx:PieChart> <mx:ControlBar width="100%"> <mx:Legend dataProvider="{pieChart}" direction="horizontal" horizontalGap="100" width="100%" /> </mx:ControlBar> </mx:Panel> </mx:Application>
View source is enabled in the following example.
[GoogleAdsWide]
You can also set the showDataTips
using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/09/13/toggling-data-tips-on-a-piechart-in-flex/ --> <mx:Application name="PieChart_showDataTips_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ private function checkBox_change(evt:Event):void { pieChart.showDataTips = checkBox.selected; } ]]> </mx:Script> <mx:XMLListCollection id="dp"> <mx:source> <mx:XMLList> <product label="Product 1" data="3" /> <product label="Product 2" data="1" /> <product label="Product 3" data="4" /> <product label="Product 4" data="1" /> <product label="Product 5" data="5" /> <product label="Product 6" data="9" /> </mx:XMLList> </mx:source> </mx:XMLListCollection> <mx:ApplicationControlBar dock="true"> <mx:CheckBox id="checkBox" label="showDataTips:" labelPlacement="left" selected="true" change="checkBox_change(event);" /> </mx:ApplicationControlBar> <mx:Panel styleName="opaquePanel" width="100%" height="100%"> <mx:PieChart id="pieChart" dataProvider="{dp}" height="100%" width="100%"> <mx:series> <mx:PieSeries id="pieSeries" field="@data" nameField="@label" filters="[]" /> </mx:series> </mx:PieChart> <mx:ControlBar width="100%"> <mx:Legend dataProvider="{pieChart}" direction="horizontal" horizontalGap="100" width="100%" /> </mx:ControlBar> </mx:Panel> </mx:Application>
Due to popular demand, here is the “same” example in a more ActionScript friendly format:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/09/13/toggling-data-tips-on-a-piechart-in-flex/ --> <mx:Application name="PieChart_showDataTips_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" initialize="init();"> <mx:Script> <![CDATA[ import mx.charts.Legend; import mx.charts.PieChart; import mx.charts.series.PieSeries; import mx.collections.XMLListCollection; import mx.containers.ApplicationControlBar; import mx.containers.ControlBar; import mx.containers.Panel; import mx.containers.TileDirection; import mx.controls.ButtonLabelPlacement; import mx.controls.CheckBox; private var dp:XMLListCollection; private var checkBox:CheckBox; private var pieChart:PieChart; private var pieSeries:PieSeries; private function init():void { var productsXML:XML = <products> <product label="Product 1" data="3" /> <product label="Product 2" data="1" /> <product label="Product 3" data="4" /> <product label="Product 4" data="1" /> <product label="Product 5" data="5" /> <product label="Product 6" data="9" /> </products>; dp = new XMLListCollection(productsXML.product); checkBox = new CheckBox(); checkBox.label = "showDataTips:"; checkBox.labelPlacement = ButtonLabelPlacement.LEFT; checkBox.selected = true; checkBox.addEventListener(Event.CHANGE, checkBox_change) var appControlBar:ApplicationControlBar; appControlBar = new ApplicationControlBar(); appControlBar.dock = true; appControlBar.addChild(checkBox); addChildAt(appControlBar, 0); pieSeries = new PieSeries(); pieSeries.field = "@data"; pieSeries.nameField = "@label"; pieSeries.filters = []; pieChart = new PieChart(); pieChart.dataProvider = dp; pieChart.showDataTips = true; pieChart.percentWidth = 100; pieChart.percentHeight = 100; pieChart.series = [pieSeries]; var legend:Legend = new Legend(); legend.dataProvider = pieChart; legend.direction = TileDirection.HORIZONTAL; legend.setStyle("horizontalGap", 100); legend.percentWidth = 100; var panelControlBar:ControlBar = new ControlBar(); panelControlBar.percentWidth = 100; panelControlBar.addChild(legend); var panel:Panel = new Panel(); panel.styleName = "opaquePanel"; panel.percentWidth = 100; panel.percentHeight = 100; panel.addChild(pieChart); panel.addChild(panelControlBar); addChild(panel); } private function checkBox_change(evt:Event):void { pieChart.showDataTips = checkBox.selected; } ]]> </mx:Script> </mx:Application>
thx,i need it !
I really liked the action script version.
It provided a really easy to follow example of how to create a chart in action script!