I am using Flot to plot images for our project. For pre-defined shapes like line, pie, I can add tooltip through flot.tooltip.
However, we have some images that are drawn through Html5 canvas API, such as Here. I would like to add a tooltip for the red rectangle and another tooltip for the blank area. Any library to make it work?
With canvas there isn't a good way to detect when the mouse hovers over a particular drawn item; it's just a buffer, with no idea of what operations were used to draw into it. Flot's own hover detection has no concept of what was drawn on the canvas; it just knows that, e.g. the pie starts at a particular point and extend outwards a certain number of pixels.
So no matter what, you will have to write a function that accepts a mouse event, examines whatever data you used to draw the image, and decides what that corresponds to.
Where Flot could help is in providing a way to override the built-in hover function with your own; then the tooltip plugin would simply work with your function. Since you can't currently do that, you have a choice of a) modifying the tooltip plugin to use your function, or b) registering your own mousemove listener on the overlay element, which then generates 'fake' plothover events for the tooltip plugin to consume.
Related
We need to make it move like here.example The code is complex there, I can't figure it out.
I wrote the code my code, but I don’t understand how to make the tooltip move horizontally not behind the mouse, but near the nearest horizontal mark (as in the example)
It is not yet clear where the text above the bold text in the tooltip comes from. How to remove it so that it looks like in the picture?
How do I make the title of the tooltip match the label on the X-axis?
There are many ways to accomplish this. The way I typically do this is to create a series of SVG elements -- such as circles or rects -- using the same scale and data as the paths.
You can make these objects visible or invisible. Either way, you can attach mouseenter, mouseleave events to each to render and populate the tooltip.
I am currently using Fabric JS but I dont like the layer/group implementation there but beside of layers fabric js has something useful I cannot find in konva js at the moment: viewports. How much work would it to implement zooming to a certain point (most often the mouse cursor) and also emit mouse events with transformed coordinates?
Use case: I would like to zoom in on a the top most layer and use drawing tools to draw on the zoomed area, so the mouse event coordinates need to fit accordingly.
Thank you :)!
I managed to get it working just by using some demo code and one coordinate scaling, great!
I have an issue on triggering mouse event on a svg.
I am using the library d3.js to handle some graphic tasks. Specifically, when I manually click on a position on the svg, d3 draws a red or blue (depending on the path I am clicking on) circle on it and then returns the d3.mouse coordinates of the click.
Now, suppose I have a set of coordinates and want to trigger programmatically click on the corresponding point on the svg, so that it draws a red or blue circle automatically. How can I achieve that?
I read many solutions here but none allows to click on specific coordinates (while I can easily click on a specific path, for example).
My ideal function would be:
var svgd3 = d3.select('svg#id_svg')
function d3click(x,y,svgd3){
//does the click on [x,y, x,y are relative coord. depending only svg viewBox
...
}
Any idea?
Thanks a lot!
I am building an interactive visualization app that is pretty much all client-side Javascript, see here:
http://korhal.andrewmao.net:9294/#/classify/APH10154043
Try the following controls:
mousewheel: zoom
drag empty area: pan
drag bottom area or handles: pan/zoom
click once, then click again: draw a box
drag on box: move box
drag edges of box: resize
The underlying mechanism is a SVG overlying a canvas. The canvas has z-index 0 and the SVG z-index 1 - feel free to inspect the DOM. Everything works pretty much fine on Chrome/Firefox.
The problem is, in IE9, the canvas seems to receive click events over the SVG, even with a lower z-index. You can tell because the mousewheel/click/drag actions don't work in the main chart area, yet they work in the edge areas because the SVG is slightly larger than the canvas and it picks up the events there. For example, try mousewheeling in the axis areas or the bottom.
After playing with it some more, I think I saw the pathology. I made a version of the page where I allowed boxes to be drawn outside the canvas (graph) area but still inside the SVG. Then I could do the following (in IE):
Draw a box in the axis area (outside of canvas)
Drag it into the main area (over the canvas)
Hold mouse over the box and use mousewheel - now the zoom events are picked up by the SVG. Mousewheeling where there was no box caused the events to go to the canvas (disappear.)
So it seems what is happening is that the SVG is only picking up mouse events when there is an explicit SVG object under the mouse, otherwise it gets passed through to the canvas, and only in Internet Explorer.
One obvious way to solve this problem is to make a transparent rect over the entire SVG region, but that seems stupid. Also, maybe I'm doing something wrong that is patched up when using Chrome but broken in IE. Does anyone have any suggestions?
Note: One (deleted) answer suggested wrapping the entire SVG region in a <g> element and applying pointer-events: all to it. However, that didn't work. I don't even think that is necessary, as pointer events are being detected fine in the entire SVG region except where there is a canvas.
If you want to prevent clicks on transparent regions in the SVG from going through to the underlying Canvas, then I would use a (slightly modified) "stupid" solution: put a transparent rect underneath the SVG contents. Something like:
<svg>
<rect width="100%" height="100%" pointer-events="all" fill="none"/>
<!-- … everything else … -->
</svg>
With fill=none and pointer-events=all, the rect won't be visible, but it will still receive mouse events and prevent those from going through to the underlying Canvas. So, if you put a click listener on the SVG, the SVG would still receive the clicks rather than the Canvas. (You can apply this technique to a G element as well, though you'll probably want to position the rect explicitly rather than using 100% width and height.)
I never have much luck trying to put code into this text area.
My question is how to modify the on mouseover (jsfiddle) so that I start with (DHTML) text and when you mouseover it arcs the text, then mouse out it returns to the original position. Even a link to a site with help.
Use one of the following methods to generate the arc and the text:
SVG
CSS3
Raphael.js
CSSWarp generator
Then bind a mouseover event to the container of the text content to produce the desired effect.