Displaying images/icons besides y-axis in Flex Bar charts - apache-flex

Question

I am trying to place an image besides the label in y-axis. So I have created a custom label renderer(A HBox containing and ). The source for the image has to be set based on a property present in the data provider. The problem is, I am not able to access the BarSeriesItem in the fnSetSource() method. Any help or pointers is greatly appreciated.
Here's the entire code.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
width="1280" height="750">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection;
import mx.charts.series.items.PlotSeriesItem;
import mx.controls.Label;
import mx.controls.Image;
import mx.containers.HBox;
import mx.charts.series.items.BarSeriesItem;
import mx.charts.series.ColumnSeries;
import mx.charts.series.items.ColumnSeriesItem;
import mx.charts.chartClasses.Series;
import mx.charts.ChartItem;
[Bindable]
public var employeedetails:ArrayCollection = new ArrayCollection([
{rank:"10",emplName:"Peter",prevRank:"7",imgSource:"images/increase.png"},
{rank:"9",emplName:"Mark",prevRank:"3",imgSource:"images/decrease.png"},
{rank:"8",emplName:"Eric",prevRank:"8",imgSource:"images/decrease.png"}
]);
]]>
</mx:Script>
<mx:BarChart id="bar" height="100%"
paddingLeft="15" paddingRight="5"
showDataTips="true" width="847"
dataTipMode="multiple" >
<mx:verticalAxis>
<mx:CategoryAxis id="v1" categoryField="emplName" dataProvider="{employeedetails}"/>
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer placement="left" axis="{v1}">
<mx:labelRenderer>
<mx:Component>
<mx:HBox width="100%" height="100%" minWidth="120" minHeight="20">
<mx:Image id="axisImage" height="16" width="16" source="fnSetSource()">
<mx:Script><![CDATA[
import mx.charts.chartClasses.Series;
import mx.charts.ChartItem;
import mx.charts.series.items.BarSeriesItem;
[Bindable]
public function fnSetSource(element : ChartItem, series : Series) : String
{
var data : BarSeriesItem = BarSeriesItem(element);
var imgSrc : String = "";
if (data.item.isIncrease)
{
imgSrc = "images/increase.png";
} else if (data.item.isDecrease)
{
imgSrc = "images/decrease.png";
}
else
{
imgSrc = "";
}
return imgSrc;
}
]]></mx:Script>
</mx:Image>
<mx:Label id="axisLabel" fontSize="12" width="100%" height="100%">
<mx:Script><![CDATA[
[Bindable]
override public function set data(value : Object) : void
{
if (value == null)
{
return;
}
var length : int = value.text.toString().length;
if (length > 15)
{
axisLabel.text = value.text.toString().substr(0, 15) + "...";
axisLabel.toolTip = value.text;
}
else
{
axisLabel.text = value.text;
}
}
]]>
</mx:Script>
</mx:Label>
</mx:HBox>
</mx:Component>
</mx:labelRenderer>
</mx:AxisRenderer>
</mx:verticalAxisRenderers>
<mx:series>
<mx:BarSeries id="bs2"
yField="emplName"
xField="rank"
displayName="Rank"
dataProvider="{employeedetails}"
/>
</mx:series>
</mx:BarChart>
</mx:Application>

Answer 1

I had a quick look at the code. The fnSetSource() function will not be called until it is placed inside curly brackets: source="{fnSetSource()}"
This will get the function to be called, but you will get errors because the fnSetSource() call does not have the 2 parameters that fnSetSource function requires. Make the first change I mentioned and you may be able to figure it out from there.
Could you not make an item renderer that is a seperate mxml component?

Answer 2

look like you are not passing any parameters that fnSetSource() needs so it will not work untill you pass those two parameters..
use your function this way
fnSetSource(value:Object,previousValue:Object,axis:IAxis):String