I'm having this wired tooltip hover problem. It basically feels like HighStock is showing the wrong tooltip when you are close to the edge of the chart.
If you hoover in the middle of the chart, it's spot on. The closer you come to the edge, the more "off" it gets.
I see there are a rect.highchart-data-label-box overlay around the points, that are pretty close to the mouse position in question, but it still shouldn't take preference of the box I'm inside of with the mouse button in the same given moment?
View this screencast
You will see I have the mouse pointer directly outside of the chart (to the left) – fair enough, it snaps to the closest point(s).
Then I move the mouse pointer direct on the first set of points on the Y-axix – it should still snap to the closest point(s)?
I've tried setting snap to zero, tried setting shared to false, among other things.
Have anyone have the same or similar problem? Suggestions on what could be wrong?
Related
I'm working on a drag and drop div project. In my editor it is possible to resize, position and rotate a selected div. It all works fine as long as the rotation is 0, but once I have set a different rotation, it starts behaving different. I'm not sure exactly what I need to do, but there must be some sort of offset that I need to take into account.
Best example I can provide is: http://recordit.co/0Pskwtrvh0
Notice in the video that without rotation I can move the div around without any problems, but after setting a rotation, everytime I click the div "skips".
Hope someone understands the problem and can push me in the right direction.
Part of my app requires the user to be able to use the mousewheel to zoom in on an image which is already centered inside a larger container element.
I am using jQueryUI to provide a slider with which the zoom is controlled manually.
When zooming withe mousewheel, the viewport adjusts so that the user is always zooming towards to mouse cursor providing exactly the same behaviour as google maps in terms of zoom functionality.
Also, in order to provide a better experience than using css transitions I have written a momentum based smooth scroll algorithm to make the zooming as smooth as possible.
Everything works perfectly with one exception.
To replicate the problem please follow these steps on the provided jsFiddle:
move mouse cursor to the center of the image.
Very gently move the mousewheel one notch so that the smoothwheel takes over an zooms you in a little.
Then move the mouse cursor to another point of the already slightly zoomed image
Zoom in again, as far as you want this time
Finally zoom all the way out
You will see that the zoomed out image is now misplaced (as the translates have not been removed).
The behaviour I want is for the zoomed out image to return to its original position once the scale is set back to 1.
If you remove the css translate from the image in Firebug you will see that the image returns to the correct location.
Therefore this could easily be achieved with a simple conditional like so:
if(scale == 1){
//remove transforms completely
}
However doing this would provide a jumpy experience and I would like the image to gradually zoom back out to the original position as the user zooms out.
It is worth mentioning that if you zoom all the way in without moving the mouse you will find that everything is correct when you zoom back out. This is simple because no translate gets added to the elements transform, simply a scale and transform-origin. In my code the translate only gets added when you change zoom position with the mouse mid zoom.
Unfortunately I cant seem to get my head around the best way of going about this.
Here is a working jsFiddle:
http://jsfiddle.net/3k332/15/
Thanks in advance for any help.
NOTE: I am well aware that there is some redundant code in my fiddle and that its not particularly elegant but this is merely a quick mock up to help you understand the problem.
Question:
How do I zoom in on the mouse position on mouse wheel scrolls?
Details:
I am trying to merge this complete solution on Stack Overflow, which allows for zooming of the stage, with this incomplete solution, which allows for zooming in around the mouse when clicked. I have forked the jsfiddle code here. The code works fine once you get it zoomed in, but upon first scrolling, the stage jumps to a different location and I can't figure out why. Can anyone tell me why it is happening, and how to solve it. Thanks.
Just a guess, but you are using the mouse position relative to the page not the canvas
When you zoom, the position under your mouse position gets changed (the reason of jumping). To move back the position to its original position, you need to pan the offset( difference between the previous position and the new position(after zoom)). To avoid stage jumping to a different location, you can use stage.setOffset function of KineticJS.
JSFiddle: http://jsfiddle.net/rpaul/ckwu7u86/3/
I have onclick event on point labels.
Works fine on IE8+, Firefox and Chrome.
Zoom also works fine.
But on IE7, IE6 I can't click on point labels because we have jqplot-event-canvas and jqplot-zoom-canvas and others on front.
When I increase z-index for <DIV class="chartPointWrapper"> ... </div> we can click on point labels. But zoom is not working.
Do you know any solution to handle chart zoom and onclick event on point labels?
Thanks.
The solution to your problem, I believe, is in EDIT2 of my answer to a similar problem.
Effectively, you must apply z-index to all canvas appropriately so they preserve they intended order.
For answer to question in #Swapnil Chincholkar 's comment above, please see this code sample. It shows how you can use the jqplotClick to detect clicks on the points. As you could read here only when you are on or close to a point the neighbor variable is not null. You could observe that the highlighter plugin uses the neighbor variable in the same way to show its tooltip.
Ok this question may sound a bit convoluted, or at least esoteric, but I'll try my best to elucidate.
In my charting application I have a div which is used as a popup tool tip. This tooltip appears when you hover over a datapoint and gives you some information. I used z-index to make the tooltip render above the underlying chart div. However, the underlying chart has interactivity with mouse events, so is it somehow possible to have the underlying chart register mouse events even though the mouse is hovering over the tooltip?
You could capture the mouse event, taking note of the coordinates, then add these coordinates to the real position of the tooltip relative to the page. Then you can re-fire a fake MouseEvent using these coordinates, minus the coordinates of the underlying div element, at the underlying element.
While I agree with the answer regarding capturing the mouse events, I think there is a workaround. Simply position the tooltip div a few pixels off of the mouse cursor. That way it never appears underneath the mouse cursor and it would not be clickable.
I do not know if this is practical or not in your situation, but you could append the tooltip as a child element to the data point. That way it is still part of the chart.
Actually, on browsers that support css3, pointer-events is the simplest solution. :)