ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Drawing line on a canvas with mouse and measuring difference between two points
Posted by karl on May-24-2015 08:50
| Reply | Monitor
Hi Peter,

I'm using a finance chart. I have placed a canvas over the finance chart and have some
tools to draw lines, shapes, etc. I would like to draw a line which will measure the %
difference between two price points. Since I'm using a canvas i'm not able to pass the x/y
coordinates from background to front. Any solutions here?

I'm using javascript for drawing over canvas. I use pointerevents attribute to control the
selection of canvas to draw. Can you post any code snippets if readily available?

Thanks a lot!!

  Re: Drawing line on a canvas with mouse and measuring difference between two points
Posted by Peter Kwan on May-26-2015 02:16
| Reply | Monitor
Hi Karl,

First, I think you can easily obtain the (x, y) pixel coordinates of the points relative to the
chart image. The key issue then is to convert the pixel coordinates into data coordinates.

To do the conversion, you may use the Javascript Chart Model. The following sample code
may act as a reference:

(a) Crosshair with Axis Labels: This sample code draws the data values at the mouse
position on the axes. It demonstrates the API to convert from the mouse coordinates to
data value for an XY chart.

http://www.advsofteng.com/doc/cdphp.htm#crosshairweb.htm

(b) Finance Chart Track Line: A financial chart can contains several XY charts (for the main
price chart and indicator charts). This sample code illustrates how to iterate and determine
the position of the XY charts on the browser side. This may be useful for your case if your
financial chart do contain multiple XY charts, in which case you may need to know which XY
chart the mouse is over and its pixel coordinates relative to that XY chart.

http://www.advsofteng.com/doc/cdphp.htm#trackfinanceweb.htm

Hope this can help.

Regards
Peter Kwan

  Re: Drawing line on a canvas with mouse and measuring difference between two points
Posted by karl on May-26-2015 22:07
| Reply | Monitor
Hi Peter,

Thanks for the suggestion.
The problem i'm facing is I'm drawing lines over a canvas placed on top of the image.
So I'm not able to pass the value from below image through canvas to mouse.

Thanks !

  Re: Drawing line on a canvas with mouse and measuring difference between two points
Posted by Peter Kwan on May-26-2015 23:56
| Reply | Monitor
Hi Karl,

You do not need to pass anything to or from the "image".

If you can draw things with the mouse, that means your code must be handling some mouse
events and have the mouse pixel coordinates.  Since you can put the canvas on top of the
chart image, it means your code knows the position of the chart image too. Now your code
knows both the mouse position and the chart image position, it must be able to determine
the pixel coordinates of the mouse relative to the chart. It can then use the getXCoor and
getYCoor method like in the sample code to obtain the data value a the mouse position.

Note the Javascript chart library can be called anywhere, such as in your own mouse event
handlers. In our sample code, we also call the Javascript chart library when the mouse is
not moving on the chart. For example, in the XY Zooming and Scrolling sample code, the
Javascript chart library is used when the mouse is moving on the "navigation pad" at the
bottom-left corner. You can certainly call the Javascript chart library when the mouse is
moving on your canvas.

Regards
Peter Kwan