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>
{ 2 comments… read them below or add one }
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.