Using external data on the Tooltip Highcharts
I have a Highchart that displays the average of a Satisfaction Survey result from the employees.
For example, the employee A received three ratings on January (2, 5, 8), the average rating is 5, so I display 5 on that month. I get an array with the averages of the months and put it on the chart. "Average of January, February ...".
Now I need to show not the average, but the amount of avaliations that the employee received on the given month on the Tooltip.
I already have the array prepared with the quantity of each month, but I am not able to display it where I want.
I am trying to show this data on the Tooltip, it comes on an array, but it shows the entire array instead of showing just one per serie.
How can I do that? I have no idea.
Highcharts.chart(pessoa, {
chart: {
type: 'column'
},
title: {
text: pessoa
},
subtitle: {
text: 'Média por mês'
},
xAxis: {
categories: meses,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Média'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">
{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.2f}</b></td><br> Total:' + R(resposta) + '</tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black'
}
}
},
series: [{
name: 'Média',
data: nota1
}]
});
The variable nota1 is the series (the averages).
highcharts tooltip
asked Nov 14 '18 at 19:03
Jean LimaJean Lima
518
add a comment |
I have a Highchart that displays the average of a Satisfaction Survey result from the employees.
For example, the employee A received three ratings on January (2, 5, 8), the average rating is 5, so I display 5 on that month. I get an array with the averages of the months and put it on the chart. "Average of January, February ...".
Now I need to show not the average, but the amount of avaliations that the employee received on the given month on the Tooltip.
I already have the array prepared with the quantity of each month, but I am not able to display it where I want.
I am trying to show this data on the Tooltip, it comes on an array, but it shows the entire array instead of showing just one per serie.
How can I do that? I have no idea.
Highcharts.chart(pessoa, {
chart: {
type: 'column'
},
title: {
text: pessoa
},
subtitle: {
text: 'Média por mês'
},
xAxis: {
categories: meses,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Média'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">
{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.2f}</b></td><br> Total:' + R(resposta) + '</tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black'
}
}
},
series: [{
name: 'Média',
data: nota1
}]
});
The variable nota1 is the series (the averages).
highcharts tooltip
asked Nov 14 '18 at 19:03
Jean LimaJean Lima
518
1
Could you prepare a simplified online example of the chart with sample data? Have you tiredtooltip.formatter? See api.highcharts.com/highcharts/tooltip.formatter
– Wojciech Chmiel
Nov 15 '18 at 7:30
add a comment |
I have a Highchart that displays the average of a Satisfaction Survey result from the employees.
For example, the employee A received three ratings on January (2, 5, 8), the average rating is 5, so I display 5 on that month. I get an array with the averages of the months and put it on the chart. "Average of January, February ...".
Now I need to show not the average, but the amount of avaliations that the employee received on the given month on the Tooltip.
I already have the array prepared with the quantity of each month, but I am not able to display it where I want.
I am trying to show this data on the Tooltip, it comes on an array, but it shows the entire array instead of showing just one per serie.
How can I do that? I have no idea.
Highcharts.chart(pessoa, {
chart: {
type: 'column'
},
title: {
text: pessoa
},
subtitle: {
text: 'Média por mês'
},
xAxis: {
categories: meses,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Média'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">
{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.2f}</b></td><br> Total:' + R(resposta) + '</tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black'
}
}
},
series: [{
name: 'Média',
data: nota1
}]
});
The variable nota1 is the series (the averages).
highcharts tooltip
asked Nov 14 '18 at 19:03
Jean LimaJean Lima
518
I have a Highchart that displays the average of a Satisfaction Survey result from the employees.
For example, the employee A received three ratings on January (2, 5, 8), the average rating is 5, so I display 5 on that month. I get an array with the averages of the months and put it on the chart. "Average of January, February ...".
Now I need to show not the average, but the amount of avaliations that the employee received on the given month on the Tooltip.
I already have the array prepared with the quantity of each month, but I am not able to display it where I want.
I am trying to show this data on the Tooltip, it comes on an array, but it shows the entire array instead of showing just one per serie.
How can I do that? I have no idea.
Highcharts.chart(pessoa, {
chart: {
type: 'column'
},
title: {
text: pessoa
},
subtitle: {
text: 'Média por mês'
},
xAxis: {
categories: meses,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Média'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">
{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.2f}</b></td><br> Total:' + R(resposta) + '</tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black'
}
}
},
series: [{
name: 'Média',
data: nota1
}]
});
The variable nota1 is the series (the averages).
highcharts tooltip
highcharts tooltip
asked Nov 14 '18 at 19:03
Jean LimaJean Lima
518
asked Nov 14 '18 at 19:03
Jean LimaJean Lima
518
asked Nov 14 '18 at 19:03
Jean LimaJean Lima
518
asked Nov 14 '18 at 19:03
Jean LimaJean Lima
518
asked Nov 14 '18 at 19:03
Jean LimaJean Lima
518
518
1
Could you prepare a simplified online example of the chart with sample data? Have you tiredtooltip.formatter? See api.highcharts.com/highcharts/tooltip.formatter
– Wojciech Chmiel
Nov 15 '18 at 7:30
add a comment |
1
Could you prepare a simplified online example of the chart with sample data? Have you tiredtooltip.formatter? See api.highcharts.com/highcharts/tooltip.formatter
– Wojciech Chmiel
Nov 15 '18 at 7:30
1
1
Could you prepare a simplified online example of the chart with sample data? Have you tired
tooltip.formatter? See api.highcharts.com/highcharts/tooltip.formatter– Wojciech Chmiel
Nov 15 '18 at 7:30
Could you prepare a simplified online example of the chart with sample data? Have you tired
tooltip.formatter? See api.highcharts.com/highcharts/tooltip.formatter– Wojciech Chmiel
Nov 15 '18 at 7:30
add a comment |
0
active
oldest
votes
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
});
}
});
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%2f53307108%2fusing-external-data-on-the-tooltip-highcharts%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
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%2f53307108%2fusing-external-data-on-the-tooltip-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
1
Could you prepare a simplified online example of the chart with sample data? Have you tired
tooltip.formatter? See api.highcharts.com/highcharts/tooltip.formatter– Wojciech Chmiel
Nov 15 '18 at 7:30