get bot xAxis values when doing click event on highcharts
0
I wanted to setup a click event to get the xAxis values in my chart. In my case I have two xAxis and wanted to get both of them. Currently in my example I am only able to get the top most xAxis value, how can I get both values when I do a click event on my chart?
js fiddle link
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 900px"></div>
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: [{
categories: ['Catagory 1', 'Catagory 2', 'Catagory '],
labels: {
style:{
color: 'red'
},
formatter: function () {
return this.value;
}
}
},
{
linkedTo: 0,
categories: ['Dec 4', 'Dec 5', 'Dec 6'],
}],
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
var tableDate = this.category;
console.log(this);
alert(tableDate);
/* window.location.href = '/performance_reports_detail'; */
}
}
}
}
},
series: [{
name: 'Group Value 1',
data: [29.9, 71.5, 106.4]
},
{
name: 'Group Value 2',
data: [50, 71.5, 106.4]
},
{
name: 'Group Value 3',
data: [21, 71.5, 106.4]
}]
});
javascript jquery charts highcharts
asked Nov 24 '18 at 20:43
MattMatt
3032623
add a comment |
0
I wanted to setup a click event to get the xAxis values in my chart. In my case I have two xAxis and wanted to get both of them. Currently in my example I am only able to get the top most xAxis value, how can I get both values when I do a click event on my chart?
js fiddle link
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 900px"></div>
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: [{
categories: ['Catagory 1', 'Catagory 2', 'Catagory '],
labels: {
style:{
color: 'red'
},
formatter: function () {
return this.value;
}
}
},
{
linkedTo: 0,
categories: ['Dec 4', 'Dec 5', 'Dec 6'],
}],
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
var tableDate = this.category;
console.log(this);
alert(tableDate);
/* window.location.href = '/performance_reports_detail'; */
}
}
}
}
},
series: [{
name: 'Group Value 1',
data: [29.9, 71.5, 106.4]
},
{
name: 'Group Value 2',
data: [50, 71.5, 106.4]
},
{
name: 'Group Value 3',
data: [21, 71.5, 106.4]
}]
});
javascript jquery charts highcharts
asked Nov 24 '18 at 20:43
MattMatt
3032623
add a comment |
0
0
0
I wanted to setup a click event to get the xAxis values in my chart. In my case I have two xAxis and wanted to get both of them. Currently in my example I am only able to get the top most xAxis value, how can I get both values when I do a click event on my chart?
js fiddle link
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 900px"></div>
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: [{
categories: ['Catagory 1', 'Catagory 2', 'Catagory '],
labels: {
style:{
color: 'red'
},
formatter: function () {
return this.value;
}
}
},
{
linkedTo: 0,
categories: ['Dec 4', 'Dec 5', 'Dec 6'],
}],
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
var tableDate = this.category;
console.log(this);
alert(tableDate);
/* window.location.href = '/performance_reports_detail'; */
}
}
}
}
},
series: [{
name: 'Group Value 1',
data: [29.9, 71.5, 106.4]
},
{
name: 'Group Value 2',
data: [50, 71.5, 106.4]
},
{
name: 'Group Value 3',
data: [21, 71.5, 106.4]
}]
});
javascript jquery charts highcharts
asked Nov 24 '18 at 20:43
MattMatt
3032623
I wanted to setup a click event to get the xAxis values in my chart. In my case I have two xAxis and wanted to get both of them. Currently in my example I am only able to get the top most xAxis value, how can I get both values when I do a click event on my chart?
js fiddle link
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 900px"></div>
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: [{
categories: ['Catagory 1', 'Catagory 2', 'Catagory '],
labels: {
style:{
color: 'red'
},
formatter: function () {
return this.value;
}
}
},
{
linkedTo: 0,
categories: ['Dec 4', 'Dec 5', 'Dec 6'],
}],
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
var tableDate = this.category;
console.log(this);
alert(tableDate);
/* window.location.href = '/performance_reports_detail'; */
}
}
}
}
},
series: [{
name: 'Group Value 1',
data: [29.9, 71.5, 106.4]
},
{
name: 'Group Value 2',
data: [50, 71.5, 106.4]
},
{
name: 'Group Value 3',
data: [21, 71.5, 106.4]
}]
});
javascript jquery charts highcharts
javascript jquery charts highcharts
asked Nov 24 '18 at 20:43
MattMatt
3032623
asked Nov 24 '18 at 20:43
MattMatt
3032623
edited Nov 24 '18 at 23:30
Matt
asked Nov 24 '18 at 20:43
MattMatt
3032623
asked Nov 24 '18 at 20:43
MattMatt
3032623
asked Nov 24 '18 at 20:43
MattMatt
3032623
3032623
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
You can get the second xAxis value from the right element in categories array:
point: {
events: {
click: function() {
var tableDate = this.category,
secondValue = this.series.chart.xAxis[1].categories[this.x];
console.log(tableDate, secondValue);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/2ge5wzLs/
answered Nov 26 '18 at 10:45
ppotaczekppotaczek
4,343129
Thank you, I also found this same solution after spending a long time going through the object.
– Matt
Nov 26 '18 at 16:39
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53462199%2fget-bot-xaxis-values-when-doing-click-event-on-highcharts%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You can get the second xAxis value from the right element in categories array:
point: {
events: {
click: function() {
var tableDate = this.category,
secondValue = this.series.chart.xAxis[1].categories[this.x];
console.log(tableDate, secondValue);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/2ge5wzLs/
answered Nov 26 '18 at 10:45
ppotaczekppotaczek
4,343129
Thank you, I also found this same solution after spending a long time going through the object.
– Matt
Nov 26 '18 at 16:39
add a comment |
1
You can get the second xAxis value from the right element in categories array:
point: {
events: {
click: function() {
var tableDate = this.category,
secondValue = this.series.chart.xAxis[1].categories[this.x];
console.log(tableDate, secondValue);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/2ge5wzLs/
answered Nov 26 '18 at 10:45
ppotaczekppotaczek
4,343129
Thank you, I also found this same solution after spending a long time going through the object.
– Matt
Nov 26 '18 at 16:39
add a comment |
1
1
1
You can get the second xAxis value from the right element in categories array:
point: {
events: {
click: function() {
var tableDate = this.category,
secondValue = this.series.chart.xAxis[1].categories[this.x];
console.log(tableDate, secondValue);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/2ge5wzLs/
answered Nov 26 '18 at 10:45
ppotaczekppotaczek
4,343129
You can get the second xAxis value from the right element in categories array:
point: {
events: {
click: function() {
var tableDate = this.category,
secondValue = this.series.chart.xAxis[1].categories[this.x];
console.log(tableDate, secondValue);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/2ge5wzLs/
answered Nov 26 '18 at 10:45
ppotaczekppotaczek
4,343129
answered Nov 26 '18 at 10:45
ppotaczekppotaczek
4,343129
answered Nov 26 '18 at 10:45
ppotaczekppotaczek
4,343129
answered Nov 26 '18 at 10:45
ppotaczekppotaczek
4,343129
4,343129
Thank you, I also found this same solution after spending a long time going through the object.
– Matt
Nov 26 '18 at 16:39
add a comment |
Thank you, I also found this same solution after spending a long time going through the object.
– Matt
Nov 26 '18 at 16:39
Thank you, I also found this same solution after spending a long time going through the object.
– Matt
Nov 26 '18 at 16:39
Thank you, I also found this same solution after spending a long time going through the object.
– Matt
Nov 26 '18 at 16:39
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53462199%2fget-bot-xaxis-values-when-doing-click-event-on-highcharts%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
