FLEX: Make LineChart DATATIP constrain to vertical axis - apache-flex

Question

When making a line chart, Lets say its for business sales for different depts and horizontally is days and vertically is dollars. When you hover over a line it tells a dataTip tells you the sales for that dept. on that day. I want it to show all the depts at the same time, so say you hover over day 3, I want the dataTips for all depts on day 3 to display so you can compare the values for all the sales on the same day. I set the mouseSensitivity for the dataTips to display all the lines at once but I end up getting day 2 for one dept and day 3 for another which is not wanted. This is actually posted as a bug and explained better here: http://bugs.adobe.com/jira/browse/FLEXDMV-1853
I am wondering if anyone can come up with a work-around for this?
Thanks!

Answer 1

I ran into a similar problem to this recently and came up with a solution that also applies to your problem. I had a step LineChart and wanted to display a data tip when the user hovered anywhere on the line instead of just at defined data points.
You can read about the solution I wrote for that problem here: Flex: Customizing data tip location and behavior in a LineChart
You'll have to modify my solution slightly to fit your problem:
On line 47 you can remove the Math.abs(last.y - mouseLoc.y) < 50 check. This constrains the data tips to lines that are within 50 pixels vertically of the mouse.
I'm assuming that you're using the default segment line chart which just draws lines directly between data points. You'll need to modify the code that calculates the line value at a given x-coordinate to work with that chart type. I already find the closest data point to the left of the mouse with lines 33-41 and store it in last. Just get the next data point (which will be the one closest to the right of the mouse) and use something like this to get the value at the mouse:
var slope:Number = (nextPoint.y - last.y) / (nextPoint.x - last.x);
var lineYAtMouse:Number = (slope * (last.x - mouseLoc.x)) + last.y;
var lineValue:Array = line.localToData(new Point(mouseLoc.x, lineYAtMouse));
Then replace lines 69 through 72 with:
hitPoint.x = mouseLoc.x;
hitPoint.y = lineYAtMouse;
hitPoint.xValue = lineValue[0];
hitPoint.yValue = lineValue[1];
I haven't tested these modifications so there could be a bug or 2 but the general idea is there. I hope maybe this is still useful to someone. This question is getting pretty old. :)

Answer 2

Not an answer, but a poor alternative:
You could create your own DataTip renderer that [ahem] mapped the location of every point and drew the tip for each one there.
Basically, you would be duplicating a lot of the code inside the charting classes.

Answer 3

I have the same problem but working on column charts. Was thinking that I could enable the vertical gridLines using backgroundElements and then add a chart event listener for mouse over (which fires when mouse passes over a vertical gridline). Using the localX value, i could compare it to the closest datapoint, maybe.
Brian