|
 adding click event to track line |
| Posted by at on Sep-24-2012 17:22 |
|
Hi Peter,
I'm glad that you added the track line feature in version 5.1. There's 2 things that I need to achieve using the
example track line with labels as reference.
1. How can I modify it so that the rectangle will only appear when I hover the mouse over a data point? I tried but
couldn't get it, I'm not that good in js yet.
2. I would like also to make it clickable. Tried to add an event listener but only working when clicked outside
the rectangle, not when hovered over it.
Pls help on how to achieve these two without using html image map since our Scatter chart is plotting too many
data points and will cause the browser to hang when html image map is used.
Thanks. |
| Re: adding click event to track line |
| Posted by Peter Kwan on Sep-25-2012 04:30 |
|
Hi at,
No matter whiuch method you use, to achieve what you need, the browser would need to know the positions of all the scatter points. When the mouse moves, the browser also need to compare the mouse coordinates with all the scatter point positions to see if the mouse is over any scatter points. If you have so many points so that the browser hangs with html image map, I am not sure if switching to a pure Javascript method would help.
The "track line" runs fast because it does not send all the information to the browser. If the width of your chart is 1000 pixels, it will not send significantly more than 1000 points to the browser. It is because mouse coordinates can only be integers, so if the mouse is "sweeping" from left to right, it cannot have more than 1000 different x-coordinates. The information ChartDirector sends to the browser is only enough the distinguish the possible mouse x-coordinates. Also, as the sweep line code only needs to handle the x-coordinates, but not the y-coordinates, it can search very quickly using binary search (2D XY search is significantly more complicated and much slower)
If your image map can hang the browser, I would expect you have much more than 1000 points. In this case, even if you can modify the Javascript code to do what you need, it may not be faster than using HTML image map (which is handled by the browser natively at the speed of machine code).
There are several methods to optimize the image map. May be you can try them to see if it helps:
(a) If the browser hangs because the network is too slow (the image map may be several MB and it may take a long time to download it), you may consider to compress the image map on the fly and deliver it as a "delayed image map". See WebChartViewer.makeDelayedMap. Because HTML is designed to be very bandwidth inefficient, compressing it often can speed up a lot. It is common to achieve 10x compression ratio.
(b) It is often possible to reduce the image map size by simplifying the handlers. For example, instead of using "onclick='....some...very...long...code...'", you may simplify it to "onclick='x(12)'", where x is a Javascript function that contains your original code, and 12 is a serial number representing the data point (so your code knows which point is being clicked). You may even simplify it to "a='12'", then use a Javscript code to iterate all the <area> tags, and to replace "a='12'" to "onclick='x(12)'".
Regards
Peter Kwan |
| Re: adding click event to track line |
| Posted by at on Sep-27-2012 18:26 |
|
Hi Peter, thanks for the suggestions. Any idea how can I add a second event to the
rectangle so that only when I click over it, it will open a new tab? As I mentioned, I tried
to add an event to the image but it's clickable all over the chart instead and not clickable
when it's over the rectangle. Part of the code below if it helps. Thanks.
JsChartViewer.addEventListener(document.getElementById('$cid'), 'load', function() {
var viewer = JsChartViewer.get('$cid');
viewer.attachHandler('MouseMovePlotArea', function(e) {
trackLineLabel(viewer, viewer.getPlotAreaMouseX());
viewer.setAutoHide('all', 'MouseOutPlotArea');
});
});
JsChartViewer.addEventListener(document.getElementById('$cid'), 'click', function() {
var viewer = JsChartViewer.get('$cid');
onScatterClick('$map_link', $x_labels, viewer); "
}); |
| Re: adding click event to track line |
| Posted by Peter Kwan on Sep-28-2012 02:50 |
|
Hi at,
You can add the onclick event handler to the rectangle, instead of the image.
If you are referring to the "Track Line with Data Labels" sample code, in the original code, the rectangle is created using:
viewer.showTextBox("dataPoint" + i + "_" + j, xCoor, yCoor, JsChartViewer.Center, viewer.htmlRect(7, 7, color));
I have tried to add an onclick handler, and it seems to work:
var obj = viewer.showTextBox("dataPoint" + i + "_" + j, xCoor, yCoor, JsChartViewer.Center, viewer.htmlRect(7, 7, color));
if (!obj.onclick)
obj.onclick=function() { alert(this.id); };
Hope this can help.
Regards
Peter Kwan |
| Re: adding click event to track line |
| Posted by at on Sep-28-2012 11:21 |
|
| Thanks Peter for the idea and as always for the superb support. |
|
Forum Home
Search
Message List
Post Message