I'm trying to add an event handler to setExtremes for the X Axis. However, this event handler gets called more than once for each zoom action, and whenever the chart is redrawn, the number of times this event will get triggered increases.
When I have something similar to the following:
xAxis: {
...options.xAxis,
events: {
setExtremes: event => console.log('setExtremes'),
afterSetExtremes: event => console.log('afterSetExtremes'),
},
},
My console gets flooded with both calls. If I trigger enough chart updates, the console looks like this (notice each console.log is being run 23 times).
I've looked through the Highcharts documentation, as well as their forum and other Stack Overflow questions trying to find something relating to my problem, but nothing seems relevant to this issue.
What should I do to fix an issue like this?
EDIT:
We are using the map extension to highcharts-react-official
require('highcharts/modules/map')(Highcharts);
This seems to only happen on the mousewheel zoom handler as an on click handler only fires once regardless of how many times the graph has refreshed
Related
Recently when using google maps, the scroll sensitivity has been off the chart. On my touchpad, moving my finger about 2mm will go from a scale of about 100ft to seeing the entire globe.
Is there any way to adjust the scroll wheel sensitivity so that this won't be so touchy?
*Edit: using debugger tools in the browser, I was able to find that the zoom was using the wheel event. I tried adding an event listener in the console, but it was never called.
window.addEventListener('wheel', e => {
console.log(e)
})
I'm guessing google already has an event listener which has a stopPropagation. Is there anything I can do in this case to intercept/change these events to reduce the sensitivity?
Since google already has an event listener registered, adding any normal event listener to try to adjust would come after their event listener, and wouldn't do any good, even if they weren't stopping propagation.
Fortunately there is something called "capturing" event listeners, which always happen before regular non-capturing event listeners. (details on capturing can be found in MDN addEventListener docs. So if we register a capturing event listener, we can catch the event before google gets it.
In this case since we just want it to be less sensitive, we can accomplish that by cancelling a bunch of scroll events. After some trial and error, I found that keeping 1 event out of 25 gave the sensitivity I wanted. I parameterized the 25 though, so that it's easy to adjust as needed.
((s) => {
let x = 0;
window.addEventListener('wheel', e => {
if (x++ % s === 0) return;
e.stopImmediatePropagation();
}, { capture: true });
})(25);
You can apply this using something like the greasemonkey plugin, or you can just make it a bookmarklet (create a bookmark, and the URL will be javascript: followed by the above script). Then you just click the bookmarklet once you load google maps, before you scroll.
I'm using Highcharts and I want to trigger some events when the user clicks on the labels of the chart. It works fine as long as I do not redraw.
When I use chart.redraw() the click event is no longer triggered
Here is a fiddle : https://jsfiddle.net/AJeantet/28oebumb/3/
Does anyone know a workaround ?
Thanks,
Adrien
The current issue is that you're attaching event handlers to DOM nodes that are destroyed when the chart is redrawn.
Change
$('.label_wrapper').click(function() {
console.log('Still working...');
});
to
$(document).on('click','.label_wrapper', function() {
console.log('Still working...');
});
The handlers will be attached to the document instead of the nodes that are being redrawn, meaning that the event handler will never be destroyed.
See the updated fiddle here.
i m still working on a parallel coordinates plot using https://github.com/syntagmatic/parallel-coordinates#parallel-coordinates and d3.js
i need to update something after the axes are reordered.
So try to add an listener to the parcoords, but i don't find how the event is called which is fired when the axes are reordered.
I use the .reorderable() method to enable the reordering.
I tried
parcoords.on("dimensions",function (){
alert('reorder');
});
but "dimensions" is not the right event, it is only triggered after changing the axes using the .dimensions() method.
I went through the examples of the library, but only found on brush events, and went through the api description, but didn't found the right event.
the question is: what is the reorder event called?
thanks in advance
greetings Jones
the event is called "axesreorder".
it and other events can be found here: https://github.com/syntagmatic/parallel-coordinates/blob/master/src/events.js (first line)
I'm having an issue where when I try to zoom in on a certain area of my graph that is continuously updating the plotselected event fires off numerous times instead of just once. I've slowed down the update rate in the attached jsfiddle significantly so that you aren't overwhelmed with alert messages to show the multiple plotselected events fired off. With a quicker refresh rate you could be stuck with 50+ of those messages. Anyways, is there a way to only fire off that event handler for the last event in the chain that's created after selecting the area? Suspect code in question (this works fine in static mode):
$("#overview").on("plotselected", function (event, ranges) {
alert(ranges.xaxis.from+','+ranges.xaxis.to);
plot.setSelection({
xaxis: {from:ranges.xaxis.from,to:ranges.xaxis.to}
});
});
full jsfiddle example: http://jsfiddle.net/grkblood13/6TG5a/
You are attaching the plotselected event handler to your plot div every time you call plotData. These are cumulative!
So, simply remove the $("#overview").on("plotselected" call outside that function.
Updated fiddle.
I have an object that prints the mouse's x and y positions on every mousemove.
It's something like this:
$('#canvas').mousemove(function(e){
$('#output').prepend(e.pageX + ',' + e.pageY);
});
I've noticed that when you move over the object really fast it only prints out a few positions.
I'm not exactly unhappy that it does that (because it would be quite exhaustive to have it do something for all the hundreds of pixels you've crossed) but I am wondering how this works.
Is the mousemove event limited to a certain amount of triggers per second or what?
(Btw: this was tested on Chromium in Ubuntu Linux)
"Mice only report their position to the operating system n times per second, and I think n is usually less than 100"
You may want to look at this, as this may be browser dependent,
http://javascript.info/tutorial/mouse-events#mousemove-and-mouseover-frequency, but, if you look at this question, there is a suggestion on how to get better response.
How to set mousemove update speed?
i think it's synchronous. It's doesn't get triggered for every pixel in which you move your mouse, which means that the events are not queued up .
Say if you have some some code like this.
$('#canvas').mousemove(function(e){
//Some code which takes seconds to execute
//All subsequent events won't be dispatched while this event handler is executing.
});
Say if you move mouse while the mouse move event handlers execute. The mousemove handler won't be triggered.
Here is a example for handler which will take seconds to execute. --> http://jsfiddle.net/78Hf3/1/
And one that take only few time --> http://jsfiddle.net/78Hf3/2/