We Keep Coding

Highcharts increase hover detection for markers

I'm trying to increase the hover detection radius for scatter points in HighCharts, but I've found no official way of doing it.
Essentially, I want each point to have an invisible radius that triggers the hover effect when the mouse enters it.
I know stickyTracking exists, but in my case it feels a bit too sticky.
Turning it off, however, means having to be extremely precise before the tooltip shows up.
StickyTracking off: https://jsfiddle.net/wsxkLn25
StickyTracking on: https://jsfiddle.net/wsxkLn25/1/
Is there a way to trigger the hover effect on a point before the mouse enters the actual radius of the point without stickyTracking?

There is no such feature in Highcharts, but you can implement it by enabling sticky tracking and process the internal getHoverData method only if a hovered point is close enough to a mouse cursor. Example:
(function(H) {
H.wrap(H.Pointer.prototype, 'getHoverData', function(proceed, existingHoverPoint, existingHoverSeries, series, isDirectTouch, shared, e) {
var hoverData = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
var RADIUS = 20;
var point = hoverData.hoverPoint;
var chart = this.chart;
var plotX;
var plotY;
if (point) {
plotX = point.plotX + chart.plotLeft;
plotY = point.plotY + chart.plotTop;
if (
plotX + RADIUS > e.chartX && plotX - RADIUS < e.chartX &&
plotY + RADIUS > e.chartY && plotY - RADIUS < e.chartY
) {
return hoverData;
} else if (chart.hoverPoint) {
chart.hoverPoint.setState('');
chart.tooltip.hide();
}
}
return {
hoverPoint: null,
hoverPoints: [],
hoverSeries: null
};
});
}(Highcharts));
Live demo: https://jsfiddle.net/BlackLabel/sb35j0ov/
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

Accurate pan and zoom to svg node

I am trying to pan and zoom to a svg node using d3js. But I cannot get my head around the math here.
If I force the desired zoom level to be 1, then I seem to get it right.
Here's an example:
let svg = d3.select('svg'),
svgW = svg.node().getBoundingClientRect().width,
svgH = svg.node().getBoundingClientRect().height,
svgCentroid = {
x : svgW / 2,
y : svgH / 2
};
// zoom functionality has been applied to this one
let selector = d3.select('#container');
let elem = d3.select('[id="6"]'),
elemBounds = elem.node().getBBox(),
elemCentroid = {
x : elemBounds.x + (elemBounds.width / 2),
y : elemBounds.y + (elemBounds.height / 2)
};
let position = {
x : svgCentroid.x - elemCentroid.x,
y : svgCentroid.y - elemCentroid.y
};
selector.transition()
.duration(750)
.call(this.zoom.transform, d3.zoomIdentity
.translate(position.x, position.y)
// set scale to 1
.scale(1)
);
My first naive thought was "piece of cake". I will just multiply the calculated positions with desired zoom level. But, surprise surprise, that got me terribly wrong.
// failed miserably
selector.transition()
.duration(750)
.call(this.zoom.transform, d3.zoomIdentity
.translate(position.x * 5, position.y * 5)
.scale(5)
);
I've been trying to play around with this example:
https://bl.ocks.org/smithant/664d6cf86e53442d09687b154a9a411d
It pretty much sums up my intentions, but even though it's right there I don't fully understand it and thus it does not work properly with the rest of my code. I guess what confuses me most about this particular example are how the variables have their names declared.
I'd be grateful if someone could point me in the right direction here. How can I achieve this? What is the appropriate math to correctly zoom and pan within an SVG?
Thanks :)

I think that what you're looking for is:
function () {
var t = d3.transform(d3.select(this).attr("transform")),
x = t.translate[0],
y = t.translate[1];
var scale = 10;
svg.transition().duration(3000)
.call(zoom.translate([((x * -scale) + (svgWidth / 2)), ((y * -scale) + svgHeight / 2)])
.scale(scale).event);
}
Where this represents the element. Have a look here for a working example. In the example you'll be able to zoom to element after pressing on it. Also if panning and zooming an svg is all you need to do check out this library. It just works, no maths required :).

RevealJS and Highchart Mouse position Tooltip Issue

I've just built my first RevealJS presentation and while all seemed to work at glance I ran into an game breaking issue with a HighChart that is caused by the way RevealJS scales/moves and elements and SVG related (at least I think so).
There's a similar issue report here, at least it seems related, though I've been unable to resolve my issue as the suggested code is not a drop-in and I'm my JS skills are lacking at best ->
Mouse position in SVG and RevealJS
I was hoping someone could help me pinpoint a potential solution, maybe that of the other stack easily can be adapted (I do need the scaling function, I know I could initialize RevealJS with a percentage option, but that will effectively break scaling on any smaller devices).
This is the code part that seems related, in my case the second else if( scale > 1 && features.zoom ) { ... } is triggered and the scaling creates a bad offset depending on resolution.
var size = getComputedSlideSize();
// Layout the contents of the slides
layoutSlideContents( config.width, config.height );
dom.slides.style.width = size.width + 'px';
dom.slides.style.height = size.height + 'px';
// Determine scale of content to fit within available space
scale = Math.min( size.presentationWidth / size.width, size.presentationHeight / size.height );
console.log("Size:"+size.presentationWidth);
console.log("Size:"+size.width);
console.log("1:"+scale);
// Respect max/min scale settings
scale = Math.max( scale, config.minScale );
console.log("2:"+scale);
scale = Math.min( scale, config.maxScale );
console.log("3:"+scale);
// Don't apply any scaling styles if scale is 1
if( scale === 1 ) {
dom.slides.style.zoom = '';
dom.slides.style.left = '';
dom.slides.style.top = '';
dom.slides.style.bottom = '';
dom.slides.style.right = '';
transformSlides( { layout: '' } );
}
else {
// Prefer zoom for scaling up so that content remains crisp.
// Don't use zoom to scale down since that can lead to shifts
// in text layout/line breaks.
if( scale > 1 && features.zoom ) {
dom.slides.style.zoom = scale;
dom.slides.style.left = '';
dom.slides.style.top = '';
dom.slides.style.bottom = '';
dom.slides.style.right = '';
transformSlides( { layout: '' } );
}
// Apply scale transform as a fallback
else {
dom.slides.style.zoom = '';
dom.slides.style.left = '50%';
dom.slides.style.top = '50%';
dom.slides.style.bottom = 'auto';
dom.slides.style.right = 'auto';
transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );
}
}
I've created a codepen to illustrate the issue, resize it from small to max size and check the mouse tooltip, there will be a small to massive offset between where the mouse is and what tooltip point shows except when the scale is 1:1.
https://codepen.io/anon/pen/MVLazG
Any and all help would be welcome. If there's a way to process the graph in a way that would retain a better mouse position I'd be grateful both suggestions and code (banged my head for a couple of hours on different approaches without luck).

It is caused by setting transform's scale on the wrapping div. You can read more about on Highcharts github here.
There is a workaround for this which seems to work in your example:
Highcharts.wrap(Highcharts.Pointer.prototype, 'normalize', function (proceed, event, chartPosition) {
var e = proceed.call(this, event, chartPosition);
var element = this.chart.container;
if (element && element.offsetWidth && element.offsetHeight) {
var scaleX = element.getBoundingClientRect().width / element.offsetWidth;
var scaleY = element.getBoundingClientRect().height / element.offsetHeight;
if (scaleX !== 1) {
e.chartX = parseInt(e.chartX / scaleX, 10);
}
if (scaleY !== 1) {
e.chartY = parseInt(e.chartY / scaleY, 10);
}
}
return e;
});
live example: https://codepen.io/anon/pen/GxzPKq

How to make click on area above / below small column, in unstacked column chart, fire the point click event

TL;DR prone?
In order to fire a click event of column, one must click in the column. That's hard to do when the column has little or no discernible height. How can I make the area above/below a column (in an unstacked column chart) change mouse cursor to pointer and subsequent mouse click fire the point's click event?
Care for more?
I have an unstacked column chart where there is a large discrepancy in value. This results in some columns being very small, basically invisible to the user.
This proves problematic when trying to fire a click event on the small columns as from what I can tell the only way to get a click to fire the point click event is if it's within the column itself. I'm wiring the click event as
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
}
}
}
The following JSFiddle is an example of this problem (The Dec point).
I understand this limitation if columns were stacked and also know a workaround is to specify a minimum point length. However I expect, when columns are not stacked, there is a way to make clicking on any area along the vertical of chart within the x axis boundaries of the column would fire the click event.
The yellow area in image below is what I'm trying to make clickable to fire the point event for the 'Dec' column.
Mousing over this area should change the pointer to cursor and when mouse clicked, the click event for corresponding column should be triggered.

JSFiddle
Approach: Hook up mousemove and click events on the chart container.
In the mousemove event, get matching point based on event offset coordinates and combo of chart + point plotting.
Change mouse cursor to cursor and state to hover (when appropriate).
$('#container').on('mousemove', function(event) {
var chart = $('#container').highcharts();
if (chart.series.length === 1) {
$('#container').css('cursor', 'default');
for (var seriesIdx = 0; seriesIdx < chart.series.length; seriesIdx++) {
var series = chart.series[seriesIdx];
for (var pointIdx = 0; pointIdx < series.data.length; pointIdx++) {
var point = series.data[pointIdx];
var height = chart.plotTop + point.plotY;
var min = chart.plotLeft + point.plotX - (point.pointWidth / 2);
var max = chart.plotLeft + point.plotX + (point.pointWidth / 2);
var isWithin = event.offsetX >= min && event.offsetX <= max;
if (isWithin && event.offsetY < height) {
$('#container').css('cursor', 'pointer');
point.setState('hover');
point.hasExtendedHover = true;
} else {
if (point.hasExtendedHover) {
point.setState();
point.hasExtendedHover = false;
}
}
}
}
}
});
Similar for click event but break out on point found because thee is no cursor and point state cleanup needed on other points.
$('#container').on('click', function(event) {
var chart = $('#container').highcharts();
var found = false;
for (var seriesIdx = 0; seriesIdx < chart.series.length; seriesIdx++) {
var series = chart.series[seriesIdx];
for (var pointIdx = 0; pointIdx < series.data.length; pointIdx++) {
var point = series.data[pointIdx];
var min = chart.plotLeft + point.plotX - (point.pointWidth / 2);
var max = chart.plotLeft + point.plotX + (point.pointWidth / 2);
if (event.offsetX > min && event.offsetX < max) {
point.firePointEvent('click');
found = true;
break;
}
}
if (found) {
break;
}
}
});
Issues:
I can't seem to get this to work for multiple series using
categories. The plotX and plotY values of points appear to mean something
different than when there is one series.
The mousemove event on the container does not
always fire, especially on multiple series. My hypothesis is there is
something stopping propagation of this event within the chart so
it's not bubbling up to the container. It's sporadic so hard to know
for sure what's happening.
If you mouse over above a column then go into the column the hover state goes away, annoying little tick that still itches after 20+ ways of scratching. IE10+ does not have this issue (wha?! +1 for IE)

Zoom image to cursor breaks when mouse is moved

This is a followup question to How to zoom to mouse pointer while using my own mousewheel smoothscroll?
I am using css transforms to zoom an image to the mouse pointer. I am also using my own smooth scroll algorithm to interpolate and provide momentum to the mousewheel.
With Bali Balo's help in my previous question I have managed to get 90% of the way there.
You can now zoom the image all the way in to the mouse pointer while still having smooth scrolling as the following JSFiddle illustrates:
http://jsfiddle.net/qGGwx/7/
However, the functionality is broken when the mouse pointer is moved.
To further clarify, If I zoom in one notch on the mousewheel the image is zoomed around the correct position. This behavior continues for every notch I zoom in on the mousewheel, completely as intended. If however, after zooming part way in, I move the mouse to a different position, the functionality breaks and I have to zoom out completely in order to change the zoom position.
The intended behavior is for any changes in mouse position during the zooming process to be correctly reflected in the zoomed image.
The two main functions that control the current behavior are as follows:
self.container.on('mousewheel', function (e, delta) {
var offset = self.image.offset();
self.mouseLocation.x = (e.pageX - offset.left) / self.currentscale;
self.mouseLocation.y = (e.pageY - offset.top) / self.currentscale;
if (!self.running) {
self.running = true;
self.animateLoop();
}
self.delta = delta
self.smoothWheel(delta);
return false;
});
This function collects the current position of the mouse at the current scale of the zoomed image.
It then starts my smooth scroll algorithm which results in the next function being called for every interpolation:
zoom: function (scale) {
var self = this;
self.currentLocation.x += ((self.mouseLocation.x - self.currentLocation.x) / self.currentscale);
self.currentLocation.y += ((self.mouseLocation.y - self.currentLocation.y) / self.currentscale);
var compat = ['-moz-', '-webkit-', '-o-', '-ms-', ''];
var newCss = {};
for (var i = compat.length - 1; i; i--) {
newCss[compat[i] + 'transform'] = 'scale(' + scale + ')';
newCss[compat[i] + 'transform-origin'] = self.currentLocation.x + 'px ' + self.currentLocation.y + 'px';
}
self.image.css(newCss);
self.currentscale = scale;
},
This function takes the scale amount (1-10) and applies the css transforms, repositioning the image using transform-origin.
Although this works perfectly for a stationary mouse position chosen when the image is completely zoomed out; as stated above it breaks when the mouse cursor is moved after a partial zoom.
Huge thanks in advance to anyone who can help.

Actually, not too complicated. You just need to separate the mouse location updating logic from the zoom updating logic. Check out my fiddle:
http://jsfiddle.net/qGGwx/41/
All I have done here is add a 'mousemove' listener on the container, and put the self.mouseLocation updating logic in there. Since it is no longer required, I also took out the mouseLocation updating logic from the 'mousewheel' handler. The animation code stays the same, as does the decision of when to start/stop the animation loop.
here's the code:
self.container.on('mousewheel', function (e, delta) {
if (!self.running) {
self.running = true;
self.animateLoop();
}
self.delta = delta
self.smoothWheel(delta);
return false;
});
self.container.on('mousemove', function (e) {
var offset = self.image.offset();
self.mouseLocation.x = (e.pageX - offset.left) / self.currentscale;
self.mouseLocation.y = (e.pageY - offset.top) / self.currentscale;
});

Before you check this fiddle out; I should mention:
First of all, within your .zoom() method; you shouldn't divide by currentscale:
self.currentLocation.x += ((self.mouseLocation.x - self.currentLocation.x) / self.currentscale);
self.currentLocation.y += ((self.mouseLocation.y - self.currentLocation.y) / self.currentscale);
because; you already use that factor when calculating the mouseLocation inside the initmousewheel() method like this:
self.mouseLocation.x = (e.pageX - offset.left) / self.currentscale;
self.mouseLocation.y = (e.pageY - offset.top) / self.currentscale;
So instead; (in the .zoom() method), you should:
self.currentLocation.x += (self.mouseLocation.x - self.currentLocation.x);
self.currentLocation.y += (self.mouseLocation.y - self.currentLocation.y);
But (for example) a += b - a will always produce b so the code above equals to:
self.currentLocation.x = self.mouseLocation.x;
self.currentLocation.y = self.mouseLocation.y;
in short:
self.currentLocation = self.mouseLocation;
Then, it seems you don't even need self.currentLocation. (2 variables for the same value). So why not use mouseLocation variable in the line where you set the transform-origin instead and get rid of currentLocation variable?
newCss[compat[i] + 'transform-origin'] = self.mouseLocation.x + 'px ' + self.mouseLocation.y + 'px';
Secondly, you should include a mousemove event listener within the initmousewheel() method (just like other devs here suggest) but it should update the transform continuously, not just when the user wheels. Otherwise the tip of the pointer will never catch up while you're zooming out on "any" random point.
self.container.on('mousemove', function (e) {
var offset = self.image.offset();
self.mouseLocation.x = (e.pageX - offset.left) / self.currentscale;
self.mouseLocation.y = (e.pageY - offset.top) / self.currentscale;
self.zoom(self.currentscale);
});
So; you wouldn't need to calculate this anymore within the mousewheel event handler so, your initmousewheel() method would look like this:
initmousewheel: function () {
var self = this;
self.container.on('mousewheel', function (e, delta) {
if (!self.running) {
self.running = true;
self.animateLoop();
}
self.delta = delta;
self.smoothWheel(delta);
return false;
});
self.container.on('mousemove', function (e) {
var offset = self.image.offset();
self.mouseLocation.x = (e.pageX - offset.left) / self.currentscale;
self.mouseLocation.y = (e.pageY - offset.top) / self.currentscale;
self.zoom(self.currentscale); // <--- update transform origin dynamically
});
}
One Issue:
This solution works as expected but with a small issue. When the user moves the mouse in regular or fast speed; the mousemove event seems to miss the final position (tested in Chrome). So the zooming will be a little off the pointer location. Otherwise, when you move the mouse slowly, it gets the exact point. It should be easy to workaround this though.
Other Notes and Suggestions:
You have a duplicate property (prevscale).
I suggest you always use JSLint or JSHint (which is available on
jsFiddle too) to validate your code.
I highly suggest you to use closures (often refered to as Immediately Invoked Function Expression (IIFE)) to avoid the global scope when possible; and hide your internal/private properties and methods.

Add a mousemover method and call it in the init method:
mousemover: function() {
var self = this;
self.container.on('mousemove', function (e) {
var offset = self.image.offset();
self.mouseLocation.x = (e.pageX - offset.left) / self.currentscale;
self.mouseLocation.y = (e.pageY - offset.top) / self.currentscale;
self.zoom(self.currentscale);
});
},
Fiddle: http://jsfiddle.net/powtac/qGGwx/34/

Zoom point is not exactly right because of scaling of an image (0.9 in ratio). In fact mouse are pointing in particular point in container but we scale image. See this fiddle http://jsfiddle.net/qGGwx/99/ I add marker with position equal to transform-origin. As you can see if image size is equal to container size there is no issue. You need this scaling? Maybe you can add second container? In fiddle I also added condition in mousemove
if(self.running && self.currentscale>1 && self.currentscale != self.lastscale) return;
That is preventing from moving image during zooming but also create an issue. You can't change zooming point if zoom is still running.

Extending #jordancpaul's answer I have added a constant mouse_coord_weight which gets multiplied to delta of the mouse coordinates. This is aimed at making the zoom transition less responsive to the change in mouse coordinates. Check it out http://jsfiddle.net/7dWrw/
I have rewritten the onmousemove event hander as:
self.container.on('mousemove', function (e) {
var offset = self.image.offset();
console.log(offset);
var x = (e.pageX - offset.left) / self.currentscale,
y = (e.pageY - offset.top) / self.currentscale;
if(self.running) {
self.mouseLocation.x += (x - self.mouseLocation.x) * self.mouse_coord_weight;
self.mouseLocation.y += (y - self.mouseLocation.y) * self.mouse_coord_weight;
} else {
self.mouseLocation.x = x;
self.mouseLocation.y = y;
}
});