I have two series of points on a Highcharts scatter plot. One of the series is draggable. The other has a click event:
events: {
click: function(e) {
if (e.point.v != 0) {
if (e.point.options.p != 0) {
location.href = 'newPage.php?pID=' + e.point.options.p;
}
}
}
},
When I drag a point from the first series and leave it (mouse-up) over a point from the second series, the click event fires and the page is redirected.
I don't want that click event to occur when dragging a point over it.
You can try using the custom events plugin for this, so that for the second series the event is 'mousedown' and not click. That should solve the problem.
plotOptions: {
series: {
point: {
events: {
mousedown: function () {
alert(this.y);
}
}
}
}
}
A working example.
NOTE: You need to be running the latest version of Highcharts for this to work, which 3.0.7
Related
I am trying to hide a node on click in network graph. How can I hide a node in Network graph using highcharts?
I already tried removing the node in the series and updating the chart. Is there a better way?
To hide a specific point on a click event use remove method:
plotOptions: {
networkgraph: {
...,
point: {
events: {
click: function() {
this.remove();
}
}
}
}
}
However, there is a bug in a networkgraph chart, related with remove method (reported here: https://github.com/highcharts/highcharts/issues/10565), so additionally you need to use a workaround:
Highcharts.wrap(
Highcharts.seriesTypes.networkgraph.prototype, 'generatePoints',
function(p) {
if (this.nodes) {
this.nodes.forEach(function(node) {
node.destroy();
});
this.nodes.length = 0;
}
return p.apply(this, Array.prototype.slice.call(arguments, 1));
}
);
Live demo: https://jsfiddle.net/BlackLabel/m9tjb481/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#remove
I"m using afterSetExtremes event to retrieve min and max x and y coordinates. Then, I add this series upon range selection. The problem is the series is not shown upon load. The simplest solution would be to simulate a range select on chart load. Is this possible? If not, is it possible to add this same series upon load?
xAxis: {
events: {
afterSetExtremes: function(e) {
var points = e.target.series[0].points,
minPoint = points[1],
maxPoint = points[points.length - 1]
if(minPoint.y < maxPoint.y)
{
var series_color = 'green';
}
else{
series_color = 'red';
}
chart.addSeries({
data:[{x:minPoint.x,y:minPoint.y},{x:maxPoint.x,y:maxPoint.y}],
color: series_color,
dashStyle: 'shortdot',
id: 'trend'
});
while(chart.series.length > 3)
{
chart.get('trend').remove();
}
}
}
}
See jsfiddle to see how it's currently working: http://jsfiddle.net/kd3aLp6m/
In load event you can use fireEvent method to trigger the afterSetExtremes event. Also, to increase performance, you can set the redraw parameter in addSeries metohd to false in all calls except the first one.
chart: {
...,
events: {
load: function() {
Highcharts.fireEvent(
this.xAxis[0],
'afterSetExtremes', {
redraw: true
}
);
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/bdnho9uc/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts#.fireEvent
I am working on a 2 level column chart. I want to perform a task like showing an alert on clicking each bar on chart on drilldown series only. I have found this:
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
}
}
}
It works fine, but it fires for parent series too. Can we force this click event to work only on 2nd level series (that appears after drilldown)?
Because the this value of your click event will be a object with no values if you click a parent, you could do a check for an x value (or similar) to see if it was a destroyed parent or you are clicking a currently available point. Make sure it's a value you know your point will have.
For example (JSFiddle):
var UNDEFINED;
$('#container').highcharts({
plotOptions: {
series: {
point: {
events: {
click: function() {
if(this.x != UNDEFINED)
alert("It's alive!");
}
}
}
}
}
// ...
});
If it only concerns a specific series you could also consider adding the event code to those specific series, instead of doing this general code for all series.
I'm binding a click event on every series point in order to get the data associated with the point.
plotOptions: {
series: {
point: {
events: {
click: function () {
console.log("that > ", this);
}
}
}
}
}
If I have a chart with no drilldown It works fine ( fiddle ).
However, if I define a drilldown ( fiddle ) i can only get the point data for the inner series. The point data is null for the slice i just clicked to drilldown.
this > c {series: null, name: null, y: null, drilldown: null, options: null…}
Is this a bug or am i missing something ?
It is a bug.
Reported to our developers here.
This happens because your click handler gets executed when the clicked element has already disappeared. Looks like a bug to me.
A quick fix would be to modify highcharts js/modules/drilldown.src.js around line 513 to look like this:
// Add the click event to the point label
H.addEvent(point, 'click', function () {
setTimeout(function() {
point.doDrilldown();
}, 100);
});
Here's a modified fiddle.
On a Highcharts bar chart, when the user clicks one of the bars, additional data is loaded elsewhere on the page via the loadDetails function.
loadDetails is specified as a click callback function for a chart via plotOptions.series.events:
var chart = new Highcharts.Chart({
defaultSeriesType: 'bar',
...
plotOptions: {
series: {
events: {
click: loadDetails
}
}
},
...
});
function loadDetails() {
...
}
The problem is I need to call the same callback function for a touchstart event on mobile devices.
There doesn't seem to be any obvious way of adding a touch event handler via the Highcharts API as far as I could tell: http://api.highcharts.com/highcharts#plotOptions.series.events.
Has anyone got any idea how to add callback functions for touch events, or trigger the click callback function from a touch event?
Yeah, something like this is not supported, I advice you to create idea here.
The only workaround which comes to my mind is use Element.on function to add custom events to elements which exists on a chart. For example: http://jsfiddle.net/3bQne/269/
chart: {
renderTo: 'container',
events: {
load: function(){
var chart = this,
path = chart.series[0].tracker;
path.on('click', function() {
alert("click");;
});
}
}
}
This works. I was trying to get Highcharts to work with Apple Pencil. I used code above but included markerGroup (along with tracker) so event triggers when user click on points along with lines of a series. I use ‘touchstart’ event to trap apple pencil click. See below.
chart: {
renderTo: 'container',
events: {
load: function(){
var chart = this,
path = chart.series[0].tracker;
path2 = chart.series[0].markerGroup;
path.on('touchstart', function() {
alert(“touch");
});
path2.on('touchstart'), function() {
alert(“touch 2”);
});
}
}
}