I have a column chart and I would like to be able to assign a click event which would fire a window.open() to a dynamically generated URL. I have an array that contains the elements for the x-Axis which I can use to generate the URL for the window.open() if I can get a pointer to the selected column. Below is the code for the chart.
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column',
margin: [50, 50, 350, 50]
},
title: {
text: 'E-Tags Cause'
},
xAxis: {
categories: _MyArray2,
labels: {
rotation: 45,
align: 'left',
style: {
fontSize: '18px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
title: {
text: 'Count'
}
},
plotOptions: {
column: {
events: {
click: function (event) {
window.open('test' + + '.html');
}
}
}
},
series: [{
name: 'E-Tag Count',
data: _MyArray,
pointWidth: 40,
dataLabels: {
enabled: true,
rotation: 0,
color: '#000000',
align: 'center',
x: -3,
y: -2,
formatter: function () {
return this.y;
},
style: {
fontSize: '14px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
$('tspan').last().remove();
});
Any help is appreciated.
I have a column chart and I would like to be able to assign a click event which would fire a window.open() to a dynamically generated URL. I have an array that contains the elements for the x-Axis which I can use to generate the URL for the window.open() if I can get a pointer to the selected column. Below is the code for the chart.
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column',
margin: [50, 50, 350, 50]
},
title: {
text: 'E-Tags Cause'
},
xAxis: {
categories: _MyArray2,
labels: {
rotation: 45,
align: 'left',
style: {
fontSize: '18px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
title: {
text: 'Count'
}
},
plotOptions: {
column: {
events: {
click: function (event) {
window.open('test' + + '.html');
}
}
}
},
series: [{
name: 'E-Tag Count',
data: _MyArray,
pointWidth: 40,
dataLabels: {
enabled: true,
rotation: 0,
color: '#000000',
align: 'center',
x: -3,
y: -2,
formatter: function () {
return this.y;
},
style: {
fontSize: '14px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
$('tspan').last().remove();
});
Any help is appreciated.
Share Improve this question asked Jul 3, 2012 at 18:14 boostsboosts 6251 gold badge8 silver badges15 bronze badges 2-
I'm not very familiar with Highcharts, but check out this similar question: stackoverflow./questions/3524774/… Calling
console.logon theeventobject andthisthat are available in the click handler seems like a good place to start. – Cecchi Commented Jul 3, 2012 at 18:22 - This also might be relevant, from the docs: 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 mon 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. – Cecchi Commented Jul 3, 2012 at 18:26
1 Answer
Reset to default 5EDIT
ADD the point object after column
WORKING JSFIDDLE
$(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: ''
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May',
'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
column :{
point:{
events:{
click:function(){
window.open(this.x + '.html') ;
}
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0,
135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
navigation: {
buttonOptions: {
align: 'center'
}
}
});
});