|
 Drawing shapes/lines on Finance chart |
| Posted by rev on Nov-24-2014 20:59 |
|
Hi Peter,
I want to draw trendlines/rectangles/triangles on top of finance charts.
As far as I have explored, this can be done by placing a canvas overlay on top of the chart and using JS paint tools to draw on canvas. I tried this. But the problem is the crosshair struggles to move on an overlay canvas. Is this due to Z-index? Do I need to toggle values Z-Index while drawing(tool selected) and hovering?
Is there any clear chartdirector way to achieve this? |
| Re: Drawing shapes/lines on Finance chart |
| Posted by Peter Kwan on Nov-25-2014 01:19 |
|
Hi rev,
I can see two potential issues for your case.
(a) ChartDirector creates the crosshair is created as the last HTML element. So "by
default", it should be on top of all HTML elements that exists on the web page (unless
you explicitly manipulate the z-index). However, if your code creates the canvas after
the crosshair is created, it is still possible for the canvas to be in front of the crosshair.
To avoid this issue, you can insert the canvas just after the chart image, like:
<div style='position:relative'>
<?php echo $viewer->renderHTML()?>
<canvas id="myCanvas" width="200" height="200"
style='background-color:#FF9999;position:absolute;left:0px;pointer-events:none'>
</canvas>
</div>
In the above example, I have put the canvas just below the chart image. I intentionlly
sets a background-color for the canvas so you can see it. I have confirmed that it will
not block the crosshair.
(b) The other issue is that the canvas will capture the mouse. For the crosshair to work,
the mouse must move over the chart. If the mouse is moving over the canvas, then it is
not moving over the chart, so the crosshair will not work. To solve the problem, you need
to find some method to make the canvas transparent to mouse actions, or to somehow
forward the mouse events to the chart image element.
In the above example, I have found that using "pointer-events:none" can make the
canvas transparent to the mouse, and it works in my case. For your real code, if you
would need to enable canvas mouse action, you may need to find a way to forward those
actions to the chart image element. Alternatively, you can try to directly call the track
line code (crossHairAxisLabel) from your canvas mouse event handler. (Note that
crossHairAxisLabel expects the x and y coordinates to be relative to the chart image.)
Hope this can help.
Regards
Peter Kwan |
| Re: Drawing shapes/lines on Finance chart |
| Posted by rev on Nov-25-2014 02:30 |
|
Thanks Peter for clear explanation.
Is there any other way which Chartdirector provides for drawing lines over chart other
than canvas overlay? I have gone through the forum and found some but it is not clear. |
| Re: Drawing shapes/lines on Finance chart |
| Posted by Peter Kwan on Nov-26-2014 00:02 |
|
Hi rev,
ChartDirector can only draw general shapes and lines on the server side or for desktop
applications.
From my understanding, for your case, it is a web applications and you would like to draw
interactively on the browser side. The only desktop application framework supported by
ChartDirector and can run on the browser side is Java Applets, but it is probably not what
you are using. So for your case, I am afraid you would need to use browser side drawing
methods with your own code. On the browser side, without using Java Applets,
ChartDirector does not have built-in features to draw general shapes and lines. It can only
draw simple horizontal and vertical lines, rectangles and text, which are how track cursors
are drawn.
Regards
Peter Kwan |
|
Forum Home
Search
Message List
Post Message