Flex Examples
In a previous example, “Toggling data tips on a PieChart in Flex”, we saw how you could toggle data tips on a Flex PieChart control by setting the showDataTips property.
The following example shows how you can toggle data tip targets on a Flex PieChart control by setting the showDataTipTargets style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/13/toggling-data-tip-targets-on-a-piechart-in-flex/ -->
<mx:Application name="PieChart_showDataTipTargets_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="showDataTipTargets:"
labelPlacement="left"
selected="true" />
</mx:ApplicationControlBar>
<mx:Panel styleName="opaquePanel"
width="100%"
height="100%">
<mx:PieChart id="pieChart"
dataProvider="{dp}"
showDataTips="true"
showDataTipTargets="{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.
You can also set the showDataTipTargets style in an external .CSS file or <mx:Style /> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/13/toggling-data-tip-targets-on-a-piechart-in-flex/ -->
<mx:Application name="PieChart_showDataTipTargets_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
PieChart {
showDataTipTargets: false;
}
</mx:Style>
<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:Panel styleName="opaquePanel"
width="100%"
height="100%">
<mx:PieChart id="pieChart"
dataProvider="{dp}"
showDataTips="true"
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>
Or, you can set the showDataTipTargets style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/13/toggling-data-tip-targets-on-a-piechart-in-flex/ -->
<mx:Application name="PieChart_showDataTipTargets_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.setStyle("showDataTipTargets", 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="showDataTipTargets:"
labelPlacement="left"
selected="true"
change="checkBox_change(event);" />
</mx:ApplicationControlBar>
<mx:Panel styleName="opaquePanel"
width="100%"
height="100%">
<mx:PieChart id="pieChart"
dataProvider="{dp}"
showDataTips="true"
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-tip-targets-on-a-piechart-in-flex/ -->
<mx:Application name="PieChart_showDataTipTargets_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 = "showDataTipTargets:";
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.setStyle("showDataTipTargets", 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.setStyle("showDataTipTargets", checkBox.selected);
}
]]>
</mx:Script>
</mx:Application>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Thank you for those great examples.
I’ve one question: Is it possible to show in the lengend also data?
for example :
Product 1 3
Product 2 1
Product 3 4
Product 4 1
Product 5 5
Product 6″ 9
MXML is one kind of programming language.