Creating Half Pie Charts in Flex

This is an awfully hacky way to perform a very specific task, but I couldn’t find anything else on the web about it so here you go. My brief was to create a pie chart representing two data sets, each occupying half of the pie chart. The pie chart as a whole could represent the sum of the two pieces of data, whilst still representing them both individually. Still with me? It ended up looking like this:

A bisected pie chart

The simplest way I could think of was to retrieve the data as a percentage, half it, then ‘pad out’ the remaining space with a blank entry.

<mx:ArrayCollection id="myData">
	<mx:source>
		<mx:Array>
			<mx:Object label="" value="{50 - (myValueOne / 2)}"/>
			<mx:Object label="My Value One" value="{myValueOne / 2}"/>
			<mx:Object label="My Value Two" value="{myValueTwo / 2}"/>
			<mx:Object label="" value="{50 - (myValueTwo / 2)}"/>
		</mx:Array>
	</mx:source>
</mx:ArrayCollection>

Define a PieChart as usual, set myData as its DataSource property. Add a PieSeries, then set the following as its fills property.

<mx:Array id="myFills">
	<mx:SolidColor color="0xFDFDCB" alpha="0" />
	<mx:SolidColor color="0xFDFDCB" alpha="1.0" />
	<mx:SolidColor color="0xBBEEBB" alpha="1.0" />
	<mx:SolidColor color="0xBBEEBB" alpha="0" />
</mx:Array>

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*