<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Flex Examples &#187; fillFunction</title>
	<atom:link href="http://blog.flexexamples.com/tag/fillfunction/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.flexexamples.com</link>
	<description>Just a bunch of Adobe Flex Examples</description>
	<lastBuildDate>Wed, 26 Jan 2011 18:09:51 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Creating custom fills in a Flex PieChart control using the fillFunction property</title>
		<link>http://blog.flexexamples.com/2007/11/07/creating-custom-fills-in-a-flex-piechart-control-using-the-fillfunction-property/</link>
		<comments>http://blog.flexexamples.com/2007/11/07/creating-custom-fills-in-a-flex-piechart-control-using-the-fillfunction-property/#comments</comments>
		<pubDate>Thu, 08 Nov 2007 04:16:02 +0000</pubDate>
		<dc:creator>Peter deHaan</dc:creator>
				<category><![CDATA[Charting]]></category>
		<category><![CDATA[PieChart]]></category>
		<category><![CDATA[PieSeries]]></category>
		<category><![CDATA[PieSeriesItem]]></category>
		<category><![CDATA[SolidColor]]></category>
		<category><![CDATA[fillFunction]]></category>
		<category><![CDATA[percentValue]]></category>

		<guid isPermaLink="false">http://blog.flexexamples.com/2007/11/07/creating-custom-fills-in-a-flex-piechart-control-using-the-fillfunction-property/</guid>
		<description><![CDATA[<p>The following example shows how you can set fill colors in a Flex PieChart by specifying a custom fill function. In this example the fill function calculates the fill color based on the percentage value of each item. The larger the wedge, the brigher the fill color.</p> <p>Full code after the jump.</p> <p></p> <p class="download"><a [...]]]></description>
			<content:encoded><![CDATA[<p>The following example shows how you can set fill colors in a Flex PieChart by specifying a custom fill function. In this example the fill function calculates the fill color based on the percentage value of each item. The larger the wedge, the brigher the fill color.</p>
<p>Full code after the jump.</p>
<p><span id="more-283"></span></p>
<p class="download"><a href="http://blog.flexexamples.com/wp-content/uploads/PieSeries_fillFunction_test/main.mxml">View MXML</a></p>
<pre class="code">
&lt;?xml version="1.0"?&gt;
&lt;!-- http://blog.flexexamples.com/2007/11/07/creating-custom-fills-in-a-flex-piechart-control-using-the-fillfunction-property/ --&gt;
&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"&gt;

    &lt;mx:Script&gt;
        &lt;![CDATA[
            import mx.charts.series.items.PieSeriesItem;
            import mx.graphics.IFill;
            import mx.charts.ChartItem;
            import mx.graphics.SolidColor;

            private function pieSeries_fillFunc(item:ChartItem, index:Number):IFill {
                var curItem:PieSeriesItem = PieSeriesItem(item);
                /* Convert to a number between 0 and 1. */
                var pct:Number = curItem.percentValue / 100;
                return new SolidColor(0x0000FF * pct, 1.0);
            }
        ]]&gt;
    &lt;/mx:Script&gt;

    &lt;mx:XML id="dp"&gt;
        &lt;products&gt;
            &lt;product label="Product 1" data="3" /&gt;
            &lt;product label="Product 2" data="1" /&gt;
            &lt;product label="Product 3" data="4" /&gt;
            &lt;product label="Product 4" data="1" /&gt;
            &lt;product label="Product 5" data="5" /&gt;
            &lt;product label="Product 6" data="9" /&gt;
        &lt;/products&gt;
    &lt;/mx:XML&gt;

    &lt;mx:PieChart id="chart"
            height="100%"
            width="100%"
            showDataTips="true"
            dataProvider="{dp.product}"&gt;
        &lt;mx:series&gt;
            &lt;mx:PieSeries id="series"
                    nameField="@label"
                    field="@data"
                    fillFunction="pieSeries_fillFunc"
                    filters="[]" /&gt;
        &lt;/mx:series&gt;
    &lt;/mx:PieChart&gt;

&lt;/mx:Application&gt;
</pre>
<p class="information"><a href="http://blog.flexexamples.com/wp-content/uploads/PieSeries_fillFunction_test/bin/srcview/index.html">View source</a> is enabled in the following example.</p>
<p><iframe src="http://blog.flexexamples.com/wp-content/uploads/PieSeries_fillFunction_test/bin/main.html" width="100%" height="300"></iframe></p>
<div class="evernoteSiteMemory"><a href="javascript:" onclick="Evernote.doClip({title: 'Creating custom fills in a Flex PieChart control using the fillFunction property on FlexExamples.com',url: 'http://blog.flexexamples.com/2007/11/07/creating-custom-fills-in-a-flex-piechart-control-using-the-fillfunction-property/',contentID: 'post-283',code: 'Pete9667',suggestNotebook: 'FlexExamples',suggestTags: 'fillFunction,percentValue',providerName: 'FlexExamples.com',styling: 'text' });return false" class="evernoteSiteMemoryLink"><img src="http://static.evernote.com/article-clipper-remember.png" class="evernoteSiteMemoryButton" />
				</a>				<div class="evernoteSiteMemoryClear">&nbsp;</div>
</div>]]></content:encoded>
			<wfw:commentRss>http://blog.flexexamples.com/2007/11/07/creating-custom-fills-in-a-flex-piechart-control-using-the-fillfunction-property/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>

