External event on Highcharts/highstock - javascript

I'm using ng-drag-drop and highcharts/highstocks.
I need to drag and drop an external item into the highcharts/highstock and create a marker. Per the docs in highcharts/highstocks, you can drag and drop but it is within the chart container.
So what I did was get the event of the entire page.
On drag and drop, I retrieve where I dropped the position relative to the entire web page. My question is, how do I translate the entire page position (pageX, pageY) into highcharts/highstock coordinates (within the plot). The dragged item is dragged from a parent component and into a child component, where the chart is.
//parent component
OnItemDropped(e:any){
//X and Y coordinates of the entire webpage when item is dropped
const add = { coord: { x: e.nativeEvent.pageX, y: e.nativeEvent.pageY }, name:'marker1' }
this.pinnedItems = [...this.pinnedItems, add]
}
so coord.x and coord.y is the entire page. but I need it to set at the page coordinates. Obviously, the position doesn't match with chart's. Is there a way where highcharts can recognize the page's XY coordinates as the chart's XY coordinates?
Alternatively, I thought about retrieving the html value of the page coord. But I cant seem to find out where that resides in the nativeElement object.

Related

Determine if drop coordinates is over another element using Vue.js?

I'm using the vue-draggable-resizable component that will give the x,y offset coordinates as to where my element was dropped on the page (that all works great). However, I would like to know if there's a way to the determine if the drop coordinates overlaps another element. I basically have pages stacked down the page and would like to know which page the element was dropped over so I can update the page number that the element belongs to.
So, my question is, how can I determine if a given x,y coordinates is overlapping another element?
You could use those drop coordinates with document.elementFromPoint(x,y). The key is to disable pointer-events on <vue-draggable-resizable>'s dragging element so that document.elementFromPoint(x,y) can grab the element underneath.
// template
<vue-draggable-resizable #dragstop="onDragStop">
// script
methods: {
onDragStop(x, y) {
/* For example's sake, this element lookup is simplified in that
only considers the top-left corner given by `(x,y)`, but
you might want to evalute additional coordinates e.g., to meet
a minimum threshold before overlap is verified. */
const el = document.elementFromPoint(x, y);
console.log(el);
}
}
// style
.dragging {
pointer-events: none; /* ignore for document.elementFromPoint() */
}
demo

move div to coordinate on svg map

I currently have a map svg on my page
<object type="image/svg+xml" data="worldHigh.svg" width="1060" height="800">Your browser does not support SVG</object>
Not when I light op certain path id's on the map I need to be able to move a div to that place on the map.
I currently have the following function that returns the x and y coordinates.
function getPosition(element) {
segments = element.pathSegList;
return { x: segments.getItem(0).x, y: segments.getItem(0).y };
}
Now the problem Im facing is finding the coordinates relative to the position on the screen so I can move a div there.
There are two options that I can see:
1 - You can get the object tag offset with jQuery ($("object").offset()) and use its 'left' and 'top' attributes to find out the object position on the screen. The div positions is (left + x, top + y).
2 - You can wrap your object inside a div, set the div position as relative, and move the desired div to inside wrapping div setting x and y as its position.

Creating interactive floor plan using d3.js (or similar)

I'm trying to make an interactive floor plan. When the user hovers a room I want to display some sort of message.
All my floor-plans are in JPEG format.
I would like to make something like this: http://dciarletta.github.io/d3-floorplan but I need to also make a tool in the backend that would create those overlays.
My questions is, how can I do it? Ideally I would just click around the room to create the overlay, but I don't think d3.js allows it. I'm also having a problem getting the correct coordinates:
$('#floor').click(function(e) {
var $this = $(this);
var offset = $this.offset();
var pos = [];
pos.x=(e.pageX-offset.left);
pos.y=(e.pageY-offset.top);
console.log('x: '+pos.x+' | y: '+pos.y);
});
http://jsfiddle.net/5nTEk/
So, not only I don't think I'm getting the correct coordinates as I don't know how to add an overlay as the link above... Any suggestions?
You can probably do it by overlaying an SVG over your <img>. D3 would render into this svg panel. You can create a polygon in the SVG based on the user clicks.
If you use the d3.event mouse locations (mouseX and mouseY, I think), you can get click positions relative to the SVG element, and then use those as vertex locations on a polygon. Checking for click proximity to the original point will allow you to decide when to close the polygon.

Google Chart API - How to access chart components at a specific position in Google Charts?

Usually you have event handler which catch mouse move or click events and give access to the element laying under mouse (a series or a cell) and a position (x, y). But in my case I have a screen point (x, y) need to access chart element it is targeting (if there is any).
In traditional way (Windows forms) there is a method like this ElementAt(int x, int y) in chart class and return value is an object like label, series, point, marker, ... etc.
The Google Visualization API does not expose any method to get the element(s) at a given set of coordinates.
Some of the charts support the ChartLayoutInterface, which allows you to get some information about the chart elements. You can use the CLI's #getBoundingBox method to get the top and left edges (relative to the chart container) and height and width of a given chart element. If you parse over all of the chart elements, you can get positions for all of them, so when you need to compare screen coordinates to elements, you could find the elements at the coordinates.
Unfortunately, there is no good way to get a list of all of the chart elements, so you would basically have to write functions that iterate over all possible elements in each element type until you fail to find one.

Position a div relavtive to another div: SVG issues

I have a div with an id="div_Diagram" that contains two other divs, div_CanvasHeader and div_Canvas, as shown. div_Canvas also contans an SVG, which in turn contains several rects. Each rect has is constructed in a way that its has a javascript script attached to its mouseover event with the x & y position values passed into the script.
Do to the nature of svgs, I'm not able to correctly position the tooltip division relative to the rect. I'd like to be able to use the rect coordinates (x&y) to position the tooltip relative to div_CanvasHeader or div_Diagram. Other then x & y, all other dimensions are fixed.
Here is the javascript. (Note that the tooltip is a telerik control. The Show() method does show the tooltip with all of the correct content but at the bottom left of page).
function showSVGTtip(elt, x, y) {
if (elt.hasAttribute("name")) {
var ttipText = elt.getAttribute("ttipText ");
var ttip = $find("<%=myToolTipDiv.ClientID %>");
document.getElementById("ttipLabel").innerHTML = ttipText ;
ttip.show();
// Need to set position of ttip relative to other element such as pnlCanvasHeader
}
}
How do I position the tooltip div relative to one of the other divs? For example, if I have the id of the tooltip div, can I move it on the client relative to div_CanvasHeader? Does the tooltip need to be contained within the other div?

Categories