Controlling tooltip display in a Flex PlotChart
Tooltips are a great feature of the Flex charting components but it's an all or nothing affair either all your points display them or none of them do. Here a way so only the points you decide show tooltips when you mouse over them.
One of the issues with the Flex charting component is that the source code is not included with the Flex SDK. However you can extract the source code by following the steps at this blog post by the Flex documentation team. Seeing what is going on inside the Charting classes is a great help.
Once you have the course code you can see that the tooltips are cached in the ChartBase class and that the cached array is private and without monkey patching the code there's going to be no way you can modify if or overwrite any of the protected functions that are involved. Could of been a better design but that's what we have to work with.
So after playing about with custom tooltip renderers, visibility of tooltips and quite a few other dead ends, I realised there was a far simpler solution and that was to overwrite the findDataPoints public method as this is the method that is used to find which points display tooltips.
From there it's a simple matter to get the list of points and simply removing the ones you don't want tooltips to display on. In the code below I've removed any point with a blank tooltip label. (Note: this code assumes that a dataTipFunction has been set up on the PlatChart.)
2{
3 import mx.charts.HitData;
4 import mx.charts.PlotChart;
5
6 public class PlotChartDataTips extends PlotChart
7 {
8 public function PlotChartDataTips()
9 {
10 super();
11 }
12
13 override public function findDataPoints(x:Number, y:Number):Array {
14 var dataPoints:Array = super.findDataPoints(x,y);
15 var nopoints:int = dataPoints.length;
16
17 // remove points that have an empty label
18 for varr i:int = nopoints-1; i > 0; i--) {
19 var hitData:HitData = dataPoints[i] as HitData;
20 var label:String = this.dataTipFunction(hitData);
21 if (label == '' || label == null) {
22 dataPoints.splice(i,1);
23 }
24 }
25
26 return dataPoints;
27 }
28
29 }
30}
However, I can't seem to get it to work I have a datatipfunction that just returns '' as a test but I still get an empty box. Do you have a working example so I can check I have not missed anything out?
Thanks
If you want to stop blank tooltips from showing you need to go a little bit further:
1. Add an itemRollOver handler to the chart.
2. In that handler set showDataTips to true or false depending on if you have any points to display (event.hitSet.length).
Something like (off the top of my head not tested):
private function checkDataTip(event:ChartItemEvent):void {
if (event.hitSet.length > 0) {
(event.currentTarget as PlotChart).showDataTips = true;
}
else {
(event.currentTarget as PlotChart).showDataTips = false;
}
}
if (label == '' || label == null)
{
if(nopoints == 1)
dataPoints = [];
else
dataPoints.splice(i,1);
}