Flex: programmatically showing data tips on a chart
June 3, 2008 4 Comments
I have seen this question asked many times (Adobe guys noticed it too, but nothing was done yet): how do I programmatically show a specific DataTip ?
I haven’t seen any decent way to do this.
First I tried doing this the easy way – dispatching a mouse move event on the chart at a specific X/Y, like so:
First you need to find your item:
var item:LineSeriesItem = someSeries.items[2];
Then calculate its actual X/Y on the chart:
var x:Number = item.x + chart.computedGutters.left + chart.getStyle("paddingLeft");
var y:Number = item.y + chart.computedGutters.top + chart.getStyle("paddingTop");
make a new mouse event:
var e:MouseEvent = new MouseEvent(MouseEvent.MOUSE_MOVE, true, false, x, y);
and force the chart dispatching it:
chart.dispatchEvent(e);
Although this might be enough for some people – I didn’t like it!!
First and most important – the data tip is not staying in view but disappear once you move your mouse over the chart. It is not persistent.
So… this is actually not being our intention.
And secondly – it seems to me as an ‘ugly’ way.
Out goes my spade and the digging began…
(For those who haven’t noticed this so far – the charts code is not friendly at all: poor documentation, too many private methods, too many mx_internals, etc…)
It was not a very pleasing digging but I finally done it !!
My solution involves a custom chart that extends the LineChart and (too many) copy&paste of private methods.
But very small changes where needed to the original methods.
Me happy !!
Demo is here (right click for source)
Source is here
Shemesh Spots 
That looks great I was wondering if I can modify it for my PlotChart I’ve been trying to do couple adjustments to it, but no luck optimizing it for my purpose.
I am selecting data tip by searching a value and after I have them selected I would also like to show the data tips.
Here is the function I am using for selecting the dataPoints:
public function selectItems(event:Event):void
{
var allSeries:Array = bigChart.series;
for (var i:int=0; i < allSeries.length; i++)
{
var selectedData:Array = [];
// Iterate over each item in the series.
for (var j:int=0; j< mainData.length; j++)
{
if (mainData.getItemAt(j).OrNo == String(txtOrderNum.text))
{
selectedData.push(j);
}
}
allSeries[i].selectedIndices = selectedData;
}
txtOrderNum.text = ”;
}
Pingback: programmatically showing data tips on a chart - the easy way « Shemesh Spots
Are you sure this line (in function addTip):
gy = Math.min(screenHeight – height,
Math.max(0, (tips[0].gy + tips[1].gy) / 2) – height / 2);
i thing, should be:
gy = Math.min(screenHeight – height,
Math.max(0, (tips[0].gy + tips[1].gy) / 2 – height / 2));
Hi
thanks for your code. It was excatly what I search since 3 days !!!
Just one more question. I use a dataTipFunction. What must I do for used it with your solution ??
For the moment it seems that it not used it !!