We Keep Coding

Draggable line with draggable points in ReactJS or plain JS?

I've been working on trying to create a draggable line with draggable points on my website. I'm working on a really simple proof of concept.
So far, I have been able to get two draggable points, and a line that gets drawn between the two points, but I am really stumped on how I can also make the line itself draggable and just have the lines move along with it. (Basically like the behavior in DrawIO for editing a plain line https://app.diagrams.net - draggable dots with a draggable line)
Here's some of the proof of concept code that I have so far: https://codesandbox.io/s/stupefied-fermat-qpigl
I'm thinking I might have to create my own listeners on the line and have it manually update the coordinates of the endpoints since I don't think I can get Drawable to work with both the line and the points without it exploding.
Anyone have options or tips on how I could get this working?
Update: I was able to get the whole line to move but only by kind of working around the issue. I made a midpoint between the two endpoints and made that midpoint draggable. Based on how much that midpoint was dragged, I also dragged the endpoints. The line will always be calculated to be drawn between the endpoints. It's still not ideal though, as I was hoping to make the whole line draggable itself. Still would appreciate ideas!
Updated sandbox: https://codesandbox.io/s/jovial-pascal-8s6x2

Bring marker to front of grid line in Highcharts

Currenly i am able to make the chart with configuration in my jsfiddle. But one thing left is that i want the markers (points) display above the gridlines. As my research, the highchart marker does not have options for zIndex.
http://jsfiddle.net/ngoclamnn/jsegagwp/1/
Tried with this code:
function(chart){
console.log(chart);
chart.series[1].graph.toFront();
chart.series[1].group.toFront();
chart.series[1].markerGroup.toFront();
}
But it still not success. Hope that someone can help :)

The feature is not available in Highcharts because all series are in the same group. You could (as suggested in comments) manipulate DOM.
Demo: http://jsfiddle.net/qaytamvy/
The solution might not work well for all cases - like dynamic chart changes, so just keep in mind this is more like a POC then a solid fix.

How can I scroll a Sheild UI chart horizontally at a time based speed

I was wondering if anyone can offer any advise/examples of using Shield UI charts to show a horizontally scrolling graph over a time period.
I am open to suggestions about how to achieve this but would like to see real-time (per second or less accuracy) scrolling, either by frequent updating of a single graph or perhaps better, simply moving a vertical line marker from left to right across the y-axis to demonstrate the movement of time, relative to a static background chart.

May you specify some more details about what you want to achieve as it is not quite clear? Can you give some image/example how it should look like?

I think you should look at that demo, probably it is something near to what you have asked.
http://demos.shieldui.com/web/line-chart/forex-data
There as you can see you can dynamically rebind chart and simulate live data. Scrolling starts after it is filled with data. Probably that is something similar to what you want to achieve.

how to use Kinetic AbsolutePosition property

I want to understand how I would draw a line between two shapes that are nested in other groups/layers. Here is a jsfiddle example which illustrates what I mean. As you can tell, when the coordinates in use are in the same layer, it is trivial to draw line. When the coordinates are nested inside other groups/layers, then the outcome is not as expected. Try moving the right box around to see the less than desirable results.
Could someone please show me how I translate coordinates from one layer into that of another.

You had some Xs where Ys should be, here's a fixed fiddle: http://jsfiddle.net/6UhNp/8/.
This works as far as you have specified, so you were using it right, but it does not work when you zoom in and out.
I have seen that zoom function you're using floating around recently, and I don't feel it's a correct solution. I haven't sat down to work it out yet, though.

Fixing position of Tipsy tooltips on Raphaël path nodes

This is a very specific and somewhat complex issue, so I have set up a minimal test case that you should probably see before reading the rest of this.
I have page that displays images with highlighted areas on hover via Raphaël. I have also been working on adding Tipsy tooltips to these hover, so you can see what each part of the image is called.
Raphaël draws the highlighted areas with SVG, and since SVG elements are also DOM-nodes, attaching Tipsy to them is easily accomplished like this:
// Get the path node as a jQuery object.
pathNode = $(path.node);
// Set the title so it's available to tipsy.
pathNode.attr('title', element.title);
// Add a Tipsy tooltip to each node, if Tipsy is loaded.
if ($.fn.tipsy) {
pathNode.tipsy({
fade: true
});
}
The problem only fly in the ointment, and the reason for this question is that Tipsy draws the tooltip at the top of the screen (at coordinates 0,0) instead of next to the SVG node, and I can't figure out how to fix it. When debugging the Tipsy JavaScript it seems to have the coordinates at some point, but still fails to draw in the right spot.
Can anyone figure it out? (See the minimal test case for details).

Maybe try using gRaphaël for those tips.
See this example I just wrote: http://jsfiddle.net/3tHmp/

Your demo is also showing tooltips at 0,0 on the iPhone.
As the pieces go red you can identify min x and min y by using getBBox()
Place tip accordingly?