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”);
});
}
}
}
Related
Is there a way to set a back button when the data is set from point.events.click , it seems that setting it in
Highcharts.setOptions({
lang: {
drillUpText: 'Back'
}
});
does not work when it is set up in point.events.click, I've tried a few options within events and most I can do is setup an alert.
http://jsfiddle.net/efiallo/bh6e4Lyq/1/
Drillup button works only when the Highcharts drilldown module is imported and used. You implemented your own drilldown mechanism so the drillup button needs to be taken care of manually.
I aggregated all chart's defaults restoring operations in the restore function:
function restore() {
setChart(name, categories, data);
drillupBtn.destroy();
}
Then I added button handling in the point.events.click:
click: function() {
var drilldown = this.drilldown,
chart = this.series.chart;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
drillupBtn = chart.renderer.button("Drill up", 100, 100, function() {
restore();
}).add();
} else { // restore
restore();
}
}
Live demo: http://jsfiddle.net/kkulig/md416hec/
API reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button
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
How do I load a given drilldown by default in Highcharts? I'm using a piechart to display the data.
I've tried triggering a click function on the path element but that doesn't work.
$('.highcharts-drilldown-point:first').click()
You can trigger a drilldown on a point by calling point.doDrilldown().
To do it by default you could for example:
$('#container').highcharts({
chart: {
events: {
load: function(event) {
this.series[0].data[0].doDrilldown();
}
}
},
// ...
});
Or see this JSFiddle demonstration.
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.