|
 Show helptip on chart |
| Posted by Em on Mar-13-2012 01:22 |
|
Hi,
I am trying to show helptip for data points on the chart. I find it is pretty hard to focus on the point and show the helptip. (Sometimes I am lucky, it shows up when I move my cursor over it; sometimes I struggle to focus on it for 1 minute, and then the helptip finally shows up).
So I wonder how I can make it easier for the user. Should I make the line thickier or the icon of the data points bigger ( I use the little "cross" shape for each data point).
Thanks in advance,
Em |
| Re: Show helptip on chart |
| Posted by Peter Kwan on Mar-14-2012 06:20 |
|
Hi Em,
If you are drawing a line chart, the hot spot is by default is created as it the line width is at least 10 pixels. (So even if your line is 1 pixel wide, the hot spot region will be as if the line is 10 pixels wide.) However, even this area may be too small. You may increase the image map line width for a line chart by using LineLayer.setImageMapWidth.
Note that thicker image map line width may cause the image map of the line segments to overlap. For example, suppose there is a line segment that goes from 0 to 10, then back to 0. The image map for the right part can overlap with the image map for the falling part. So although your mouse is over some hot spot, it may be over a hot spot you do not expect. For example, if you mouse your mouse from one line segment to the other, you may think it moves to another hot spot, but the browser may decide that it is still in the original hot spot. If the mouse stays in the same hot spot for too long, the browser will hide the tooltip box.
The followings are some ideas on using tooltips:
(a) Instead of using the standard HTML tooltip feature, you may consider to use Javascript to implement your own tooltip box, or use a third party fancy tooltip box. If the tooltip box appears instantly (instead of after a delay as in most browsers), and does not automatically hide after sometime, it is easier to activate. There is an example "Javascript Clickable Chart" that shows how to create some instant display when the mouse is over a hot spot. You may modify it to become a tooltip box, or modify it to use a third party fancy tooltip box.
(b) Some people will disable the image map for the line layer (see Layer.setHTMLImageMap). Instead, a transparent scatter layer will be used with large symbols at the data point positions. The scatter layer has no visible effect to the chart as it is transparent. It provides large hot spot regions at the data point positions (instead of the line segments). Some people find it easier to use if the tooltips are associated with the data points, rather than the line segments.
Hope this can help.
Regards
Peter Kwan |
| Re: Show helptip on chart |
| Posted by Em on Mar-19-2012 05:18 |
|
Thank you, Peter. Now I am using
setDataSymbol(DiamondShape, 12) for Showing symbols.
Is there anyway to set the color of the symbol as transparent so the symbol will be invisible but the hotspot will be quite large?
Thanks,
Em |
| Re: Show helptip on chart |
| Posted by Peter Kwan on Mar-19-2012 21:39 |
|
Hi Em,
When you call setDataSymbol, you can supply the fill and edge colors of the symbol, and you can set both of them to transparent. For example:
...setDataSymbol(DiamondShape, 12, Transparent, Transparent);
Hope this can help.
Regards
Peter Kwan |
|
Forum Home
Search
Message List
Post Message