Flex Charting: Per-Item Fills at tsclausing.com

Get the Flash Player to see this player.

(Flex Charting is now Flex Data Visualization.)

Interested in how this was accomplished? Flex application located at the bottom of the post.

XML

The data for this sample application is being loaded from an XML file. The structure is similar to the following:

PLAIN TEXT

XML:

<questions>
<question name="Question" score="90.4935" color="0x00529B">
<month name="December 2007" score="90.4935">
<subquestion name="Sub Question" score="90.4935">
<breakdown name="Male" score="87.3264" color="0x333333"/>
...
</subquestion>
...
</month>
...
</question>
...
</questions>

Attributes to colors

Each <Question ...> tag contains an attribute named color with a string value of "0xVALUE". We need that string value parsed into a value that we can use to create a color. Easy enough:

PLAIN TEXT

Actionscript:

/**
* Replace "0x333333" with a reference to your string value
*/
var color:SolidColor = new SolidColor(parseInt("0x333333") as uint);

Colors to Per-Item Fills

Now that we know how to parse a string to a SolidColor, let's use that to fill chart series items. We will use a ColumnChart as an example:

PLAIN TEXT

Actionscript:

<mx:Script>
<![CDATA[
import mx.charts.ChartItem;
import mx.graphics.IFill;
import mx.graphics.SolidColor;
import com.domain.project.model.ModelLocator;
/**
* Model
*/
[Bindable]
private var model:ModelLocator = ModelLocator.getInstance();
/**
* Chart Per-Item Fill function
*/
private function itemFillFunction(element:ChartItem, index:Number) : IFill
{
var color:SolidColor = new SolidColor(parseInt(element.item.color) as uint);
return color;
}
]]>
</mx:Script>
<mx:ColumnChart dataProvider="{model.data}">
<mx:series>
<mx:ColumnSeries dataProvider="{model.data}"
yField="score" xField="name"
fillFunction="itemFillFunction"/>
</mx:series>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="name"/>
</mx:horizontalAxis>
</mx:ColumnChart>

The ColumnSeries sends each ChartItem to the itemFillFunction and expects back an object which implements IFill, such as SolidColor. Since each of the objects in the data provider contain a property called color with a string representation of the color value, we can parse out the color and return it to the chart item.

Noteworthy: Since the series fillFunction expects back anything which implements IFill, you could also return a LinearGradient or RadialGradient.

Try it out

If you found this helpful, please let me know! Thanks.

tsclausing.com