Flex Examples
The following example shows how you can set the marker width and marker height on a Flex Legend control by setting the markerWidth and markerHeight styles.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/28/setting-the-marker-width-and-height-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_markerHeight_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:Form styleName="plain">
<mx:FormItem label="markerWidth:">
<mx:HSlider id="markerWSlider"
minimum="5"
maximum="15"
value="10"
snapInterval="1"
tickInterval="1"
liveDragging="true" />
</mx:FormItem>
<mx:FormItem label="markerHeight:">
<mx:HSlider id="markerHSlider"
minimum="5"
maximum="15"
value="10"
snapInterval="1"
tickInterval="1"
liveDragging="true" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Panel id="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>
<mx:Legend id="legend"
dataProvider="{pieChart}"
direction="horizontal"
horizontalGap="100"
markerWidth="{markerWSlider.value}"
markerHeight="{markerHSlider.value}" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
View source is enabled in the following example.
You can also set the markerWidth and markerHeight styles 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/28/setting-the-marker-width-and-height-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_markerHeight_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
Legend {
markerWidth: 5;
markerHeight: 5;
}
</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 id="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>
<mx:Legend id="legend"
dataProvider="{pieChart}"
direction="horizontal"
horizontalGap="100" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
Or, you can set the markerWidth and markerHeight styles using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/28/setting-the-marker-width-and-height-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_markerHeight_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
private function markerWSlider_change(evt:SliderEvent):void {
legend.setStyle("markerWidth", evt.value);
}
private function markerHSlider_change(evt:SliderEvent):void {
legend.setStyle("markerHeight", evt.value);
}
]]>
</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:Form styleName="plain">
<mx:FormItem label="markerWidth:">
<mx:HSlider id="markerWSlider"
minimum="5"
maximum="15"
value="10"
snapInterval="1"
tickInterval="1"
liveDragging="true"
change="markerWSlider_change(event);" />
</mx:FormItem>
<mx:FormItem label="markerHeight:">
<mx:HSlider id="markerHSlider"
minimum="5"
maximum="15"
value="10"
snapInterval="1"
tickInterval="1"
liveDragging="true"
change="markerHSlider_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Panel id="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>
<mx:Legend id="legend"
dataProvider="{pieChart}"
direction="horizontal"
horizontalGap="100"
markerWidth="10"
markerHeight="10" />
</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/28/setting-the-marker-width-and-height-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_markerHeight_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.Form;
import mx.containers.FormItem;
import mx.containers.Panel;
import mx.containers.TileDirection;
import mx.controls.HSlider;
import mx.events.SliderEvent;
private var dp:XMLListCollection;
private var legend:Legend;
private var markerHSlider:HSlider;
private var markerWSlider:HSlider;
private var panel:Panel;
private var pieChart:PieChart;
private var pieSeries:PieSeries;
private function init():void {
var xmlDP: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(xmlDP.product);
markerWSlider = new HSlider();
markerWSlider.minimum = 5;
markerWSlider.maximum = 15;
markerWSlider.value = 10;
markerWSlider.snapInterval = 1;
markerWSlider.tickInterval = 1;
markerWSlider.liveDragging = true;
markerWSlider.addEventListener(SliderEvent.CHANGE,
markerWSlider_change);
markerHSlider = new HSlider();
markerHSlider.minimum = 5;
markerHSlider.maximum = 15;
markerHSlider.value = 10;
markerHSlider.snapInterval = 1;
markerHSlider.tickInterval = 1;
markerHSlider.liveDragging = true;
markerHSlider.addEventListener(SliderEvent.CHANGE,
markerHSlider_change);
var formItem1:FormItem = new FormItem();
formItem1.label = "markerWidth:";
formItem1.addChild(markerWSlider);
var formItem2:FormItem = new FormItem();
formItem2.label = "markerHeight:";
formItem2.addChild(markerHSlider);
var form:Form = new Form();
form.styleName = "plain";
form.addChild(formItem1);
form.addChild(formItem2);
var appControlBar:ApplicationControlBar;
appControlBar = new ApplicationControlBar();
appControlBar.dock = true;
appControlBar.addChild(form);
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];
legend = new Legend();
legend.dataProvider = pieChart;
legend.direction = TileDirection.HORIZONTAL;
legend.setStyle("horizontalGap", 100);
legend.setStyle("markerWidth", markerWSlider.value);
legend.setStyle("markerHeight", markerHSlider.value);
var controlBar:ControlBar = new ControlBar();
controlBar.addChild(legend);
panel = new Panel();
panel.styleName = "opaquePanel";
panel.percentWidth = 100;
panel.percentHeight = 100;
panel.addChild(pieChart);
panel.addChild(controlBar);
addChild(panel);
}
private function markerWSlider_change(evt:SliderEvent):void {
legend.setStyle("markerWidth", evt.value);
}
private function markerHSlider_change(evt:SliderEvent):void {
legend.setStyle("markerHeight", evt.value);
}
]]>
</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
