Highcharts => Getting the id of a point when clicking on a line chart
Solution 1
According to the docs, event.point holds a pointer to the nearest point on the graph.
So I'd write the event.point
to the console, and see what's available.
console.log(event.point);
click: Fires when the series is clicked. The this keyword refers to the series object itself. One parameter, event, is passed to the function. This contains common event information based on jQuery or MooTools depending on which library is used as the base for Highcharts. Additionally, event.point holds a pointer to the nearest point on the graph.
Example based on the example from the docs: http://jsfiddle.net/5nTYd/
Click a point, and check the console.
Solution 2
I just did this by passing 3 objects into the series data array and then pulling it out of the object's config attribute from the click.
So you can construct your series data something like this:
series: [{
name: 'Example',
yAxis: 0,
type: 'spline',
data: [[1294099200000,220.0,37],[1296432000000,190.0,40],[1297036800000,184.4,5]]
}]
In the data attribute above the 1st element is the date (x), the 2nd element is another data point (y), and the 3rd is the id of the object that represent that data object. This "z" will not show up on the graph but will show up as the 3rd element in the config array. For example: using plotOptions point attribute to capture the click, the ID of the object is in the alert as this.config[2]
plotOptions: {
series: {
cursor: 'pointer',
point: {events: {click: function() {console.log(this); alert('Category: '+ this.category +', value: '+ this.y + 'Series: ' + this.series.name + ' ID: ' + this.config[2])}}}
}
},
Solution 3
To return the 'ID' of the selected point on the chart use the 'X' value:
plotOptions: {
series: {
cursor: 'pointer',
events: {
click: function(event) {
// Log to console
console.log(event.point);
alert(this.name +' clicked\n'+
'Alt: '+ event.altKey +'\n'+
'Control: '+ event.ctrlKey +'\n'+
'Shift: '+ event.shiftKey +'\n'+
'Index: '+ event.point.x);
}
}
}
},
See an example here: http://jsfiddle.net/engemasa/mxRwg/
Solution 4
I had the same problem ... if I understand correctly. My solution is this, to get the id of the series ... See if it helps ...
plotOptions{
series:{
cursor: 'pointer',
events: {
click: function(event) {
console.log(event.point.series.userOptions.id);
}
}
}
Related videos on Youtube
Johann
Updated on October 03, 2020Comments
-
Johann over 3 years
I am building a line chart and I would like, when I click on a point of the line, to display a popup containing some data about this point. The issue I try to resolve is to get the id, the series associated with this point or something like that.
Here is my code :
plotOptions: { column: { pointWidth: 20 }, series: { cursor: 'pointer', events: { click: function(event) { requestData(event.point); } } }
I tried
requestData(this.point)
,
requestData(this.point.id)
also but it doesn't work.
How do we get the id of a point ?
Thanks a lot.
-
user113716 over 13 years@Johann - I updated my answer. Log
event.point
to the console to see what properties are available to you from the nearestpoint
that was clicked. -
Johann over 13 yearsHere is what I obtain in my console : Processing ChartsController#return_data (for 127.0.0.1 at 2010-08-19 13:10:36) [GET] Parameters: {"name"=>"[object Object]", "_"=>"1282248635940"}
-
Johann over 13 yearsevent.point is just an [object Object] and it doesn't say what properties are available...
-
user113716 over 13 yearsWhat browser are you using? You should be able to expand the
Object
to see all its properties. In Safari/Chrome or Firebug dev tools, you click theObject
in the console. If you're using IE8, I'm not sure. If you're doing analert()
then you'll just get[object Object]
. If that's the case, I'd recommend using developer tools instead. -
Amiram Korach over 3 yearsThanks! Saved me a great time.