|
 Mouse Cross Hairs on Web Based Chart |
| Posted by Dan on Nov-29-2010 21:58 |
|
Hi Peter,
I am confused with how to draw both vertical and horizontal lines (cross hairs) that move with the mouse's position on a web based chart. Do I need to use jsChartViewer to enable this (or does this make it much easier). Could you post code or point me in the right direction on how to go about this?
Thanks in advance,
Dan Hayes |
| Re: Mouse Cross Hairs on Web Based Chart |
| Posted by Peter Kwan on Nov-30-2010 01:27 |
|
Hi Dan,
You do not need to use JsChartViewer or anything in ChartDirector. You just need to use standard HTML and Javascript.
If you are not familiar with how to do this, you may consider to try the HTML/Javascript first using a test page, like:
<html><body><IMG ID="xxx" SRC="any_test_image.png"></body></html>
The above should be a web page containing an image.
Now you can try to draw a vertical line. In HTML, one way to draw a line is like:
<div id="yyy" style="width:1px;height:100px;background-color:#000000;position:absolute"><img width="1px" height="1px"></div>
After drawimg line, you may add an onmousemove event handler to the <IMG>. When the mouse moves, the event handler should modify the position of the line to track the mouse. This creates a vertical line that tracks the mouse. You may use similar method to create the horizontal line. This creates a cross-hair cursor over the image.
As you can see above, the cross-hair cursor is not related to ChartDirector and does not need ChartDirector features (just like a normal mouse cursor is not related to ChartDirector, even though the mouse cursor moves over the chart). It just needs normal HTML/Javascript.
After you are familiar with how to create a mouse cursor, you may use the same method to create the cursor on the <IMG> tag that contains the chart.
Hope this can help.
Regards
Peter Kwan |
|
Forum Home
Search
Message List
Post Message