<?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>Tucker Watson&#187; Chart</title>
	<atom:link href="http://tuckwat.com/blog/tag/chart/feed/" rel="self" type="application/rss+xml" />
	<link>http://tuckwat.com/blog</link>
	<description>Software development - Flex, Niagara AX, oBIX, and more</description>
	<lastBuildDate>Fri, 18 Jun 2010 00:43:37 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Flex Custom Column Chart ItemRenderer</title>
		<link>http://tuckwat.com/blog/flex/flex-custom-column-chart-itemrenderer/</link>
		<comments>http://tuckwat.com/blog/flex/flex-custom-column-chart-itemrenderer/#comments</comments>
		<pubDate>Sun, 22 Feb 2009 15:11:25 +0000</pubDate>
		<dc:creator>Tucker</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[Chart]]></category>
		<category><![CDATA[Component]]></category>
		<category><![CDATA[Degrafa]]></category>

		<guid isPermaLink="false">http://tuckwat.com/blog/?p=206</guid>
		<description><![CDATA[I&#8217;ve spend a lot of time lately trying to figure out how to draw on chart components and how to use Degrafa (graphics framework for Flex).  I thought it&#8217;d be cool to have a column chart change colors programmatically based on its value.
This example demonstrates how to:

Createa custom ItemRenderer and apply it to a [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve spend a lot of time lately trying to figure out how to <a title="Ely Greenfield: How to draw on charts" href="http://www.quietlyscheming.com/blog/charts/easy-custom-charts/" target="_blank">draw on chart components</a> and how to use <a title="Degrafa.org" href="http://www.degrafa.org" target="_blank">Degrafa</a> (graphics framework for Flex).  I thought it&#8217;d be cool to have a column chart change colors programmatically based on its value.</p>
<h5>This example demonstrates how to:</h5>
<ul>
<li>Createa custom ItemRenderer and apply it to a series</li>
<li>Use Degrafa to convert numbers to a color in the spectrum</li>
<li>Convert pixel to chart coordinates to smoothly change column colors</li>
</ul>
<p>See the example below, more code and comments after the break (right click to view source):</p>
<div class="other">
<iframe style="border-style:solid;" src="http://www.tuckwat.com/blog/files/ThermalColumnChart/ThermalColumnChart.html" width="584" height="300"></iframe>
</div>
<p><span id="more-206"></span></p>
<h5>Creating a programmatic ItemRenderer</h5>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #9900cc; font-weight: bold;">package</span> util
<span style="color: #000000;">&#123;</span>
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.display</span>.<span style="color: #004993;">GradientType</span>;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.display</span>.<span style="color: #004993;">Graphics</span>;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.geom</span>.<span style="color: #004993;">Point</span>;
	<span style="color: #0033ff; font-weight: bold;">import</span> <span style="color: #004993;">flash.geom</span>.<span style="color: #004993;">Rectangle</span>;
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">import</span> mx.charts.ChartItem;
	<span style="color: #0033ff; font-weight: bold;">import</span> mx.charts.ColumnChart;
	<span style="color: #0033ff; font-weight: bold;">import</span> mx.charts.chartClasses.LegendData;
	<span style="color: #0033ff; font-weight: bold;">import</span> mx.core.Application;
	<span style="color: #0033ff; font-weight: bold;">import</span> mx.core.IDataRenderer;
	<span style="color: #0033ff; font-weight: bold;">import</span> mx.core.UIComponent;
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #9900cc; font-weight: bold;">class</span> ThermalColumnChartRenderer extends UIComponent implements IDataRenderer
	<span style="color: #000000;">&#123;</span>
&nbsp;
	    <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> ThermalColumnChartRenderer<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
	    <span style="color: #000000;">&#123;</span>
	        <span style="color: #0033ff; font-weight: bold;">super</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
	    <span style="color: #000000;">&#125;</span>
	    <span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> chartItem<span style="color: #000000; font-weight: bold;">:</span>ChartItem;
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> <span style="color: #0033ff; font-weight: bold;">set</span> <span style="color: #004993;">data</span><span style="color: #000000;">&#40;</span><span style="color: #004993;">value</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Object</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
	    <span style="color: #000000;">&#123;</span>
	        <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>chartItem == <span style="color: #004993;">value</span><span style="color: #000000;">&#41;</span>
	            <span style="color: #0033ff; font-weight: bold;">return</span>;
&nbsp;
	        <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">value</span> <span style="color: #0033ff; font-weight: bold;">is</span> LegendData<span style="color: #000000;">&#41;</span>
	        	<span style="color: #0033ff; font-weight: bold;">return</span>;
	        chartItem = ChartItem<span style="color: #000000;">&#40;</span><span style="color: #004993;">value</span><span style="color: #000000;">&#41;</span>;
	    <span style="color: #000000;">&#125;</span>	
&nbsp;
	    <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> <span style="color: #0033ff; font-weight: bold;">get</span> <span style="color: #004993;">data</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Object</span>
	    <span style="color: #000000;">&#123;</span>
	        <span style="color: #0033ff; font-weight: bold;">return</span> chartItem;
	    <span style="color: #000000;">&#125;</span>
&nbsp;
	    override <span style="color: #0033ff; font-weight: bold;">protected</span> <span style="color: #339966; font-weight: bold;">function</span> updateDisplayList<span style="color: #000000;">&#40;</span>unscaledWidth<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span>,unscaledHeight<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
	    <span style="color: #000000;">&#123;</span>
	        <span style="color: #0033ff; font-weight: bold;">super</span>.updateDisplayList<span style="color: #000000;">&#40;</span>unscaledWidth, unscaledHeight<span style="color: #000000;">&#41;</span>;
&nbsp;
	        <span style="color: #009900;">// Convert the pixel location into the chart location</span>
	        <span style="color: #6699cc; font-weight: bold;">var</span> curValue<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span> = convertDataToLocal<span style="color: #000000;">&#40;</span>chartItem.itemRenderer.<span style="color: #004993;">y</span><span style="color: #000000;">&#41;</span>;
&nbsp;
	        <span style="color: #6699cc; font-weight: bold;">var</span> rc<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Rectangle</span> = <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">Rectangle</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">0</span>, <span style="color: #000000; font-weight:bold;">0</span>, <span style="color: #004993;">width</span> , <span style="color: #004993;">height</span> <span style="color: #000000;">&#41;</span>;
	        <span style="color: #6699cc; font-weight: bold;">var</span> columnColor<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">uint</span>;
	        <span style="color: #6699cc; font-weight: bold;">var</span> g<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Graphics</span> = <span style="color: #004993;">graphics</span>;
		g.<span style="color: #004993;">clear</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
		g.<span style="color: #004993;">moveTo</span><span style="color: #000000;">&#40;</span>rc.<span style="color: #004993;">left</span>,rc.<span style="color: #004993;">top</span><span style="color: #000000;">&#41;</span>;
		g.<span style="color: #004993;">lineStyle</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">2</span><span style="color: #000000;">&#41;</span>;
&nbsp;
		<span style="color: #009900;">// Use thermal class to convert our 0-100 value to a color</span>
		g.<span style="color: #004993;">beginFill</span><span style="color: #000000;">&#40;</span>getThermalColor<span style="color: #000000;">&#40;</span>curValue<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span>;	  	
&nbsp;
	        g.<span style="color: #004993;">lineTo</span><span style="color: #000000;">&#40;</span>rc.<span style="color: #004993;">right</span>,rc.<span style="color: #004993;">top</span><span style="color: #000000;">&#41;</span>;
	        g.<span style="color: #004993;">lineTo</span><span style="color: #000000;">&#40;</span>rc.<span style="color: #004993;">right</span>,rc.<span style="color: #004993;">bottom</span><span style="color: #000000;">&#41;</span>;
	        g.<span style="color: #004993;">lineTo</span><span style="color: #000000;">&#40;</span>rc.<span style="color: #004993;">left</span>,rc.<span style="color: #004993;">bottom</span><span style="color: #000000;">&#41;</span>;
	        g.<span style="color: #004993;">lineTo</span><span style="color: #000000;">&#40;</span>rc.<span style="color: #004993;">left</span>,rc.<span style="color: #004993;">top</span><span style="color: #000000;">&#41;</span>;
	        g.<span style="color: #004993;">endFill</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
  		<span style="color: #000000;">&#125;</span>
&nbsp;
  		<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> getThermalColor<span style="color: #000000;">&#40;</span>num<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span>
  		<span style="color: #000000;">&#123;</span>
  			<span style="color: #0033ff; font-weight: bold;">return</span> Application.application.thermalColor.getColor<span style="color: #000000;">&#40;</span>num<span style="color: #000000;">&#41;</span>;
  		<span style="color: #000000;">&#125;</span>
&nbsp;
	    <span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #339966; font-weight: bold;">function</span> convertDataToLocal<span style="color: #000000;">&#40;</span>yNum<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span>
	    <span style="color: #000000;">&#123;</span>
	    	<span style="color: #6699cc; font-weight: bold;">var</span> chart<span style="color: #000000; font-weight: bold;">:</span>ColumnChart = ColumnChart<span style="color: #000000;">&#40;</span>parentApplication.columnChart<span style="color: #000000;">&#41;</span>;
	    	<span style="color: #6699cc; font-weight: bold;">var</span> oldPoint<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Point</span> = <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">Point</span><span style="color: #000000;">&#40;</span><span style="color: #000000; font-weight:bold;">0</span>,yNum<span style="color: #000000;">&#41;</span>;
	    	<span style="color: #6699cc; font-weight: bold;">var</span> newPoint<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Array</span> = chart.localToData<span style="color: #000000;">&#40;</span>oldPoint<span style="color: #000000;">&#41;</span>;
&nbsp;
			<span style="color: #009900;">// Not sure why but the data value is always slightly larger than the</span>
			<span style="color: #009900;">// actual value, so cap at 100</span>
			<span style="color: #0033ff; font-weight: bold;">if</span><span style="color: #000000;">&#40;</span>newPoint<span style="color: #000000;">&#91;</span><span style="color: #000000; font-weight:bold;">1</span><span style="color: #000000;">&#93;</span> <span style="color: #000000; font-weight: bold;">&amp;</span>gt; <span style="color: #000000; font-weight:bold;">100</span><span style="color: #000000;">&#41;</span> <span style="color: #0033ff; font-weight: bold;">return</span> <span style="color: #000000; font-weight:bold;">100</span>;
&nbsp;
	    	<span style="color: #0033ff; font-weight: bold;">return</span> <span style="color: #000000;">&#40;</span>newPoint<span style="color: #000000;">&#91;</span><span style="color: #000000; font-weight:bold;">1</span><span style="color: #000000;">&#93;</span><span style="color: #000000;">&#41;</span>;
	    <span style="color: #000000;">&#125;</span>
	<span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span></pre></div></div>

<h5>Converting a number to a color with help from Degrafa</h5>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #9900cc; font-weight: bold;">package</span> util
<span style="color: #000000;">&#123;</span>
	<span style="color: #0033ff; font-weight: bold;">import</span> com.degrafa.paint.palette.PaletteUtils;
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #9900cc; font-weight: bold;">class</span> ThermalColor
	<span style="color: #000000;">&#123;</span>
		<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> hi<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">int</span> = <span style="color: #000000; font-weight:bold;">0</span>;
		<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> lo<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">int</span> = <span style="color: #000000; font-weight:bold;">0</span>;
		<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> colorMap<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Array</span>;
&nbsp;
		<span style="color: #009900;">// Number of different colors in range</span>
		<span style="color: #0033ff; font-weight: bold;">private</span> <span style="color: #6699cc; font-weight: bold;">var</span> <span style="color: #004993;">size</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">int</span> = <span style="color: #000000; font-weight:bold;">150</span>;
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> ThermalColor<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>
		<span style="color: #000000;">&#123;</span>
			colorMap = getColorMap<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
		<span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> setHi<span style="color: #000000;">&#40;</span>hi<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">int</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
		<span style="color: #000000;">&#123;</span>
			<span style="color: #0033ff; font-weight: bold;">this</span>.hi = hi;
		<span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> setLo<span style="color: #000000;">&#40;</span>lo<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">int</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
		<span style="color: #000000;">&#123;</span>
			<span style="color: #0033ff; font-weight: bold;">this</span>.lo = lo;
		<span style="color: #000000;">&#125;</span>
&nbsp;
		<span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> setSize<span style="color: #000000;">&#40;</span>newSize<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">int</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #0033ff; font-weight: bold;">void</span>
		<span style="color: #000000;">&#123;</span>
			<span style="color: #004993;">size</span> = newSize;
			colorMap = getColorMap<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
		<span style="color: #000000;">&#125;</span>		
&nbsp;
		<span style="color: #009900;">// Generates a thermal color map with [size] many colors</span>
        <span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> getColorMap<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Array</span>
        <span style="color: #000000;">&#123;</span>
        	<span style="color: #6699cc; font-weight: bold;">var</span> colorMap<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Array</span> = <span style="color: #0033ff; font-weight: bold;">new</span> <span style="color: #004993;">Array</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
            <span style="color: #6699cc; font-weight: bold;">var</span> h<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">Number</span>;
            <span style="color: #0033ff; font-weight: bold;">for</span> <span style="color: #000000;">&#40;</span><span style="color: #6699cc; font-weight: bold;">var</span> i<span style="color: #000000; font-weight: bold;">:</span><span style="color: #004993;">int</span>=<span style="color: #000000; font-weight:bold;">0</span>; i</pre></div></div>

<h5>References:</h5>
<p><a title="Using a programmatic renderer in your ColumnChart to set the color of your columnSeries based on your data " href="http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&amp;productId=2&amp;postId=2021" target="_blank">http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&amp;productId=2&amp;postId=2021</a><br />
<a title="A Simple Degrafa Color Picker" href="http://blog.sunild.com/2009/01/simple-degrafa-color-picker.html" target="_blank"> http://blog.sunild.com/2009/01/simple-degrafa-color-picker.html</a><br />
<a title="Skinning ChartItem objects " href="http://livedocs.adobe.com/flex/3/html/help.html?content=charts_formatting_12.html" target="_blank"> http://livedocs.adobe.com/flex/3/html/help.html?content=charts_formatting_12.html</a></p>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?&amp;linkurl=http%3A%2F%2Ftuckwat.com%2Fblog%2Fflex%2Fflex-custom-column-chart-itemrenderer%2F&amp;linkname=Flex%20Custom%20Column%20Chart%20ItemRenderer"><img src="http://tuckwat.com/blog/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share/Save/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://tuckwat.com/blog/flex/flex-custom-column-chart-itemrenderer/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
