I have some graphs on my page. When the user drags his cursor over the picture, I'd like to show a horizontal line over the graph.
The one above is the starting point and the latter shows what should happen when the user points his cursor over the graph. The line should stay on the same level with the cursor, when it's over the image.
Is this possible with Javascript, for example?
It is, you need e.g. a div box positioned at cursers Y value with 1px green border. Position has to be set to absolute. But you can't paint directly in the image.
You can use D3, and based on svg, to draw the graph and the hover line , you could add other graph component to interact as well such as a slider bar to select sub interval to enlarge, changing labels etc.
Take this as an example to develop:
http://mpf.vis.ywng.cloudbees.net/
(you can drag the yellow bar, and click the legend; for source code, click fork me on github)
Related
I have an image, and I would like to divide it into different sections. When the mouse is hovered over each section, I would like that section to be highlighted with a red box and a text box of some annotations appear. Is such a thing possible?
For example, if the picture is some buildings side by side, when I hover over the middle building, I would like a rectangle to appear over that building, and a panel to appear with some text information.
If this was a graph, I know could do it using plotly. But it is not a graph, just an image. Can something similar still be done in python or will I have to switch to HTML/CSS/Javascript (which I am not familiar with)?
As a starting point, I have used Pillow/PIL to create the red box at specific sections, but this does not address the interactive component I want.
Any advice for a relative beginner is welcomed.
I'm trying to add an image overlay on top a Leaflet map, but I want it to be drawn only in the area that a geo-json multipolygon closes (so treat the geo-json layer as a mask for the image). The image I want to display is rectangular, with no transparent areas.
By using a SVG mask, I achieve my purpose. As the geo-json is put in a SVG element, I'm able to fill it with my image.
https://gyazo.com/069ecec5904026d5f4d0624c6f1a2a7e
But the problem arises when I start zooming in. The SVG where the geo-json is placed changes its size and shape. It becomes smaller than it should be (because areas that are outside the map are removed from the SVG), so the image is not centered on its exact position anymore.
https://gyazo.com/68148043d5ff3d11c0a13aa1d29c197b
As you can see, both when zooming and when panning the map, the image moves, and that's because the SVG where the geo-json is displayed changes its width and height.
Here is a fiddle with the code I came up at the moment: https://jsfiddle.net/8n3m6t51/
I can think for several solutions:
Force Leaflet to always draw the full geo-json area, even those polygons or areas that are out of the screen.
Use a ImageOverlay and set it a mask (but I think this one would be impossible).
But at the moment I haven't figured out what to do to get this issue fixed.
I'm using NVD3 1.8 for charting and I've implemented a custom tooltip because our visual design department didn't like the one that the library came with. I've been able to implement most of the design, but I have one problem:
The arrow on the tooltip needs to point to the guideline whether it's on the right or the left. I made this arrow using CSS and I can easily add a class to move it to the other side, but the problem is figuring out when to apply the class. When the user's mouse gets too close to the right side of the screen, the transform: translation() value of the tooltip is changed so that it appears to the left side of the mouse rather than the right.
This is done based on the width if the tooltip, NOT a static distance from the right edge of the screen (I know this because my tooltip dynamically resizes based on its contents, and a tooltip further to the left can sometimes be flipped left by having larger number values). I don't know how to access the "flip" information programmatically, as it seems to make this check after the tooltip is already rendered. How can I get around this conundrum?
Is it possible to just decide that if the guideline is on the right side of the screen then make the tooltip go to the left, and if it's on the left side make the tooltip go to the right?
You could perform a calculation where you just take the width / 2. This is what I do whenever I have a tooltip. I also move the tooltip below the cursor when it's on the upper portion of the page and move the tooltip above the cursor when it's on the bottom portion of the page
Hope this helps.
When displaying a context menu in GoJS, it can happen that said menu exeeds the viewport.
The following image shows this case, the upper edge of the image is the border of the canvas GoJS draws on.
When this happens, is it possible to programmatically move the whole diagram down so the menu is visible again?
Yeah, use Diagram.centerRect or Diagram.scrollToRect
var node = myDiagram.findNodeForKey(someKey);
myDiagram.centerRect(node.actualBounds);
See an example on the Initial Viewport intro page.
i got a problems using the heatmap-openlayers.js, i loaded a page with some default points that only shows the heatmap gradient, but when i dragged the image (map) or moved the gradient to the bottom of the image i found out that i also have a red line on the map, it's seems to be a replication of the gradient's set of points but couldn't figure out why it's happening..
i uploaded a sample to: http://hightech-library.com/heatmap
and i added a bit css so you will see the problem on the go, if you will drag the image to the left the red line will disappear like something is blocking it, and when dragging back it will reappear..
check out the source of the page and you'll see the sample code.
can anyone tell me if i'm doing anything wrong or how to fix it..
i figured out what the red line were, when drawing a heatmap it draws all the points with the max gradient color with an offset of 1000 from the position you requested and then it makes a shadow on the canvas of these points instead, this shadow is the heatmap that you see with all the gradient's colors.
When drawing on an image with a fixed color this offset of 1000 wasn't enough and when i dragged the map i saw the source of the shadow as "red lines".My solution was to increase this offset and push those "red lines" outside the canvas.