Highcharts: Passing a secondary data variable in the tooltip - javascript

I'm trying to pass a secondary variable that's located in each point of my series' data-set. I've managed to that so far but when I try to hover on another data point on the chart, the same data gets printed for all points instead of showing the correct data for that specific point.
I've tried a variety of solutions and I would like to stick to this one, however I have this small hurdle which I can't seem to get over.
Here's a jsFiddle to show the problem I'm encountering: https://jsfiddle.net/Flik1/dfn51akc/47/
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = [
'column 1', 'column 2', 'column 3', 'column 4'
];
Highcharts.chart('container', {
chart: {
type: 'bar',
followTouchMove: true,
spacingTop: 10,
spacingLeft: 5,
spacingRight: 5
},
xAxis: [{
reversed: true,
tickPosition: 'inside',
startOnTick: true,
endOnTick: true,
categories: categories,
labels: {
enabled: false
}
},
{ // mirror axis on right side
opposite: true,
reversed: true,
linkedTo: 0,
tickPosition: 'inside',
categories: [
'NIL'
],
labels: {
step: 1,
enabled: false
}
}
],
plotOptions: {
series: {
stacking: 'normal',
borderColor: '#fafafa'
}
},
tooltip: {
shared: true,
formatter: function() {
var points = this.points;
var series = this.series;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<span style=\'font-size: 10px\'>' + points[0].key + '</span><br/>' : '';
for (index = 0; index < pointsLength; index++) {
tooltipMarkup += '<b>' + this.points[index].series.name + ': </b>' + this.points[index].series.userOptions.data[0].tt + '<br/>';
}
return tooltipMarkup;
}
},
series: [{
data: [{
y: -2.2,
tt: "1"
}, {
y: -2.6,
tt: "2"
}, {
y: -1.3,
tt: "3"
}, {
y: -5.2,
tt: "4"
}]
}, {
color: '#FF0000',
dataLabels: {
enabled: true,
inside: true,
align: 'left',
format: '{x}'
},
data: [{
y: 1.3,
tt: "5"
}, {
y: 2.3,
tt: "6"
}, {
y: 4.3,
tt: "7"
}, {
y: 1.7,
tt: "8"
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
I believe its a problem with this specific line of code as its displaying the first 'tt' variable from each series.
this.points[index].series.userOptions.data[0].tt
The expected outcome would be 1 and 5 for column 1, 2 and 6 for column 2, 3 and 7 for column 3 and 4 and 8 for column 4.

Try this.points[index].point.options.tt
// Data gathered from http://populationpyramid.net/germany/2015/
// Age categories
var categories = [
'column 1', 'column 2', 'column 3', 'column 4'
];
Highcharts.chart('container', {
chart: {
type: 'bar',
followTouchMove: true,
spacingTop: 10,
spacingLeft: 5,
spacingRight: 5
},
xAxis: [{
reversed: true,
tickPosition: 'inside',
startOnTick: true,
endOnTick: true,
categories: categories,
labels: {
enabled: false
}
},
{ // mirror axis on right side
opposite: true,
reversed: true,
linkedTo: 0,
tickPosition: 'inside',
categories: [
'NIL'
],
labels: {
step: 1,
enabled: false
}
}
],
plotOptions: {
series: {
stacking: 'normal',
borderColor: '#fafafa'
}
},
tooltip: {
shared: true,
formatter: function() {
var points = this.points;
var series = this.series;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<span style=\'font-size: 10px\'>' + points[0].key + '</span><br/>' : '';
for (index = 0; index < pointsLength; index++) {
tooltipMarkup += '<b>' + this.points[index].series.name + ': </b>' + this.points[index].point.options.tt + '<br/>';
}
return tooltipMarkup;
}
},
series: [{
data: [{
y: -2.2,
tt: "1"
}, {
y: -2.6,
tt: "2"
}, {
y: -1.3,
tt: "3"
}, {
y: -5.2,
tt: "4"
}]
}, {
color: '#FF0000',
dataLabels: {
enabled: true,
inside: true,
align: 'left',
format: '{x}'
},
data: [{
y: 1.3,
tt: "5"
}, {
y: 2.3,
tt: "6"
}, {
y: 4.3,
tt: "7"
}, {
y: 1.7,
tt: "8"
}]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

Related

Creating Pie Chart from external JSON not working

I have the following code to generate a pie chart. I am calling an external json file to generate the pie chart.
For some reason. it not generating the pie chart. what am i missing or doing wrong?
Here is my code below:
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
JAVASCRIPT
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- high chart libarary -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script>
var options = {
chart: {
renderTo: 'container',
type: 'pie',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: '',
},
subtitle: {
text: '',
},
xAxis: {
categories: []
},
yAxis: {
enabled: false,
title: {
text: 'Amount'
},
labels: {
// formatter:function() {
// return Highcharts.numberFormat(this.value, 0, '', ',');
// }
// ,enabled: false
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': $' + Highcharts.numberFormat(this.y, 0, '', ',');
}
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
legend: {
enabled: false
},
series: [{}]
}
setTimeout(function() {
$.getJSON("pie.json", function(json) {
// options.xAxis.categories = json[0]['data'];
// options.series[0] = json[1];
// options.series[1] = json[2];
// chart = new Highcharts.Chart(options);
// debugger
console.log(json);
alert(json);
options.series[0].data = json
chart = new Highcharts.Chart(options);
});
}, 0)
</script>
JSON - pie.json
[{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
Here we are.The pie json data need a transfrom as I show you below:
var options = {
chart: {
renderTo: 'container',
type: 'pie',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: '',
},
subtitle: {
text: '',
},
xAxis: {
categories: []
},
yAxis: {
enabled: false,
title: {
text: 'Amount'
},
labels: {
// formatter:function() {
// return Highcharts.numberFormat(this.value, 0, '', ',');
// }
// ,enabled: false
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': $' + Highcharts.numberFormat(this.y, 0, '', ',');
}
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
legend: {
enabled: false
},
series: [{type:"pie"}]
}
setTimeout(function() {
$.getJSON("pie.json", function(json) {
console.log(json);
alert(json);
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
}, 0);
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- high chart libarary -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body></html>
pie..json
[{
"name": "Microsoft Internet Explorer",
"y": 56.33
}, {
"name": "Chrome",
"y": 24.03,
"sliced": true,
"selected": true
}, {
"name":"Firefox",
"y": 10.38
}, {
"name":"Safari",
"y": 4.77
}, {
"name":"Opera",
"y": 0.91
}, {
"name": "Proprietary or Undetectable",
"y": 0.2
}]

highcharts StockChart pass multiple values to tooltip

These code are written by javascript,and use hightChart StockChart below.
The program can draw chart by the datetime and report_value1 in the stockChart,and show report_value1 in the tooltip.
I want to add more values to show in the pointFormat of the tooltip.
How to add code to show the rpm value of the speed_data in the tooltip?
var speed_data = [];
for (var i = 0; i < _datalenght; i++) {
v = sData[i];
speed_data.push([
v.report_time * 1000,
v.report_value1,
v.rpm,
]);
}
fuelchart = new Highcharts.StockChart({
chart: {
renderTo: "speed_chart_div",
type: 'line',
zoomType: 'x',
marginRight: 10,
backgroundColor: null
},
rangeSelector: {
buttons: [{
type: 'minute',
count: 5,
text: '5min'
}, {
type: 'minute',
count: 30,
text: '30min'
}, {
type: 'hour',
count: 1,
text: '1hour'
}, {
type: 'hour',
count: 4,
text: '4hour'
}, {
type: 'hour',
count: 8,
text: '8hour'
}, {
type: 'all',
count: 1,
text: 'all'
}],
selected: 5,
inputEnabled: false
},
title: {
text: null
},
subtitle: {
text: '' // dummy text to reserve space for dynamic subtitle
},
scrollbar: {
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonBorderRadius: 7,
trackBackgroundColor: 'none',
trackBorderWidth: 1,
trackBorderRadius: 8,
trackBorderColor: '#CCC'
},
xAxis: {
type: 'datetime',
ordinal: false
},
yAxis: {
title: {
text: JLANG.REPORT_SPEED
},
min: 0
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
line: {
lineWidth: 2,
states: {
hover: {
lineWidth: 3
}
}
}
},
series: [{
name: JLANG.REPORT_SPEED,
type: 'area',
color: '#357EC7',
lineWidth: 1,
data: speed_data,
tooltip: {
valueDecimals: 0,
useHTML: true,
headerFormat: '<span style="color: {series.color}; font-size:15px;"><b>{point.key}</b></span>',
pointFormat:
'<br/><div><span style="color: {series.color}; font-size:15px;">{series.name}: </span></div>' + '<div><span style="text-align: right; font-size:15px;"><b>{point.y} km/h</b></span></div>' +
'<br/><div><span style="color: {series.color}; font-size:15px;">rpm: </span></div>' + '<div><span style="text-align: right; font-size:15px;"><b>{???} </b></span></div>'
,
xDateFormat: '%H:%M:%S %d-%m-%Y'
},
gapSize: 0,
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
threshold: null
}],
credits: {
enabled: false
}
});
I try it succussfully.
usdeur = [[1187654400000,0.7429,1],[1187740800000,0.7383,2],[1187827200000,0.7369,3]];
propertyData = [];
//propertyData[1187654400000] = {"a":1,"b":2};
//propertyData[1187740800000] = {"a":3,"b":4};
//propertyData[1187827200000] = {"a":5,"b":6};
for (var i = 0; i < usdeur.length; i++) {
propertyData[usdeur[i][0]] = {"a":i,"b":i+1};
}
Highcharts.stockChart('container', {
xAxis: {
type: 'datetime',
ordinal: false
},
yAxis: {
title: {
text: "speed"
},
min: 0
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
valueDecimals: 0,
useHTML: true,
xDateFormat: '%H:%M:%S %d-%m-%Y',
/* pointFormat:
'<br/><div><span style="color: {series.color}; font-size:15px;">{series.name}: </span></div>' +
'<div><span style="text-align: right; font-size:15px;"><b>{propertyData[point.x]}.{point.y} km/h</b></span></div>',
*/
formatter: function () {
var s = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>';
$.each(this.points, function () {
s += '<br/>1 USD = ' + this.y + ' EUR<br/>' +
propertyData[this.x]["a"] + "<br/>" +
propertyData[this.x]["b"] ;
});
return s;
}
},
rangeSelector: {
selected: 1
},
series: [{
type: 'area',
name: 'USD to EUR',
data: usdeur
}]
});

Highcharts Stack column issue

Here is the code link: https://jsfiddle.net/chong789456/a77pj67b/3/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ["c1", "c2", "c3", "c4"],
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
useHTML: true,
formatter: function() {
var tooltip = '';
tooltip = '<b style="color:' + this.point.series.color + ';">Type: </b>' + this.point.series.name + '<br>';
tooltip += '<b style="color:' + this.point.series.color + ';">Clicks: </b>' + Highcharts.numberFormat(this.point.y, 0, '.', ',') + '<br>';
return tooltip;
}
},
plotOptions: {
column: {
stacking: 'normal'
},
series: {
minPointLength: 10
}
},
series: [
{
color: '#8fdc87',
name: 'orange',
data: [
14943,0,3857,34
]
},{
color: '#7CB5EC',
name: 'apple',
data: [
0,0,0,0
]
},
],
});
I have 4 categories(c1,c2,c3,c4) and 2 series(orange,apple).
The issue is, for category c4, the orange's number is 34 and the apple's number is 0, only apple showns in c4 as you can see in the chart. I want orange shows there and the tooltip should also show something like:
Type: Orange
Clicks: 34
I'm confused that Orange doesn't show in C4 as its clicks is not 0. Anybody can help? thanks tons!
=================================================
I have fixed this issue now! : ) Here is the link:
https://jsfiddle.net/75zk3w08/1/
series: [
{
color: '#8fdc87',
name: 'orange',
data: [
14943,null,3857,34
]
},{
color: '#7CB5EC',
name: 'apple',
data: [
null,null,null,null
]
},
],
The only different of these 2 examples is the series section. If i set the value to null, then it won't show in the chart.
you can set the yAxis: {min: 0, max: 100}
minimum and maximum of y axis.this will affect y-axis scale As in your example
you are only setting minimum y axis please check the below

Highcharts multi y-axis min-max issue

I have a highcharts graph with three data ranges on the y-axis. Two monetary amounts and one 'survival probability' which is a percentage.
I need to restrict the range of the percentage axis to 0-100% but nothing I do seems to make any difference.
Any ideas ?
Here's the fiddle : http://jsfiddle.net/moonspace/2jnrp/
And here's (some of) the code:
jQuery('#chartContainer').highcharts({
chart: { width: 600, height: 500 },
title: { text: '' },
credits: { enabled: false },
xAxis: {
categories: client_age_array,
title: {
text: 'Client age',
style:{ color: '#000000', fontWeight: 'bold', fontSize: '12px' }
},
labels: {
step: 5,
staggerLines: 1
}
},
yAxis: [{ // First yAxis - Income
labels: {
style: {
color: gradTop,
fontSize: '12px'
}
},
title: {
text: 'Income',
style: {
color: gradTop,
fontSize: '12px'
}
},
opposite: true,
min: null,
max: null
},
{ // Second yAxis - Fund value
gridLineWidth: 0,
labels: {
style: {
color: '#003466',
fontSize: '12px'
}
},
title: {
text: 'Fund value',
style: {
color: '#003466',
fontSize: '12px'
}
},
min: null,
max: null
},
{ // Third yAxis - Survival probability
gridLineWidth: 0,
labels: {
format: '{value}%',
style: {
color: '#fe6f01',
fontSize: '12px'
}
},
title: {
text: 'Survival probability',
style: {
color: '#fe6f01',
fontSize: '12px'
}
},
opposite: true,
min: 0,
max: 100
}],
tooltip: {
formatter: function() {
var toolTip = '<b>Age : '+ this.x +'</b><br />';
jQuery.each(this.points, function(i, point) {
if( point.series.name == 'Survival probability' ){
if( isNaN(point.y) ){
// -- do nothing
}else{
toolTip += point.series.name + ' : ' + point.y + '<br />';
}
}else{
toolTip += point.series.name + ' : ' + point.y + '<br />';
}
});
return toolTip;
},
shared: true
},
navigation: {
buttonOptions: {
verticalAlign: 'bottom',
y: -5
}
},
series: [
{
name: 'Income',
type: 'column',
yAxis: 0,
data: income_array
},
{
name: 'Fund value',
type: 'spline',
yAxis: 1,
data: fund_value_array,
marker: {
enabled: false
}
},
{
name: 'Survival probability',
type: 'line',
lineWidth: 0,
yAxis: 2,
data: survival_array_2
}
],
colors: [{
linearGradient: perShapeGradient,
stops: [ [0, gradTop], [1, gradBottom] ]
},
'#003466',
'#fe6f01'
]
});
Simply set alignTicks to false for the Survival Probability axis. That's it.

Highcharts Flag series tooltip does not follow yAxis

I refer to http://jsfiddle.net/VJsjg/2/
$(function() {
$('#container').highcharts('StockChart', {
chart: {
zoomType: 'x',
marginTop: 100, //avoid overlapping with navigator
spacingLeft: 0
},
scrollbar: {
enabled: false
},
navigator: {
enabled: true,
top: 40
},
rangeSelector: {
selected: 1
},
yAxis:[{
top:140,
height:150
}],
series: [{
id:'msft',
name: 'MSFT',
data: MSFT
}]
});
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.addAxis({
id:'secondY',
top:300,
height:150
});
chart.addSeries({
id:'adbe',
yAxis:'secondY',
name: 'ADBE',
data: ADBE
});
$(this).attr('disabled', true);
chart.addSeries(
// the event marker flags
{
type : 'flags',
data : [{
x : Date.UTC(2011, 3, 25),
title : 'H',
text : 'Euro Contained by Channel Resistance'
}, {
x : Date.UTC(2011, 3, 28),
title : 'G',
text : 'EURUSD: Bulls Clear Path to 1.50 Figure'
}],
onSeries : 'adbe',
shape : 'circlepin',
width : 16
});
});
});
Notice that the circlepin H and C are at the correct position of the bottom series. However, when we do a mouseover, the position of the tooltip followed the top series instead.
Has anyone encountered the same problem before?
I fixed my own problem by adding a
tooltip: {
followPointer:true
}
to the series.
Refer to http://jsfiddle.net/VGj9q/ for the solution.
Tooltip can follow yAxis by adding followingPointer:true, but in this way, the tooltip shape became 'square', not 'callout'.
I think this is a bug of highcharts, some similar issues can be found on github. But seems they didn't fix it for 'flag' series.
Refer to http://jsfiddle.net/4jt9jxs1/2/ for this issue.
Highcharts.stockChart('container', {
chart: {
height: 600,
},
navigator: {
enabled: false
},
yAxis: [{
id: "1",
height: 200,
},{
id: "2",
top: 300,
height: 200,
}],
tooltip:{
shared: false
},
series: [{
name: 'USD to EUR',
id: 'dataseries',
data: usdeur,
yAxis: "1"
},{
name: 'USD to EUR1',
id: 's1',
data: usdeur,
yAxis:"2"
}, {
type: 'flags',
data: [{
x: Date.UTC(2011, 1, 14),
title: 'A',
text: 'Shape: "squarepin"'
}, {
x: Date.UTC(2011, 3, 28),
title: 'A',
text: 'Shape: "squarepin"'
}],
onSeries: 'dataseries',
shape: 'squarepin',
width: 16
}, {
type: 'flags',
data: [{
x: Date.UTC(2010, 2, 1),
text: 'Shape: "circlepin"'
}, {
x: Date.UTC(2010, 9, 1),
text: 'Shape: "circlepin"'
}],
shape: 'circlepin',
onSeries: 's1',
yAxis:"2",
title: 'B',
tooltip: {
followPointer: true,
},
width: 16
}, {
type: 'flags',
data: [{
x: Date.UTC(2012, 2, 10),
title: 'C',
text: 'Shape: "flag"'
}, {
x: Date.UTC(2013, 3, 11),
title: 'C',
text: 'Shape: "flag"'
}],
yAxis:"2",
color: '#5F86B3',
fillColor: '#5F86B3',
onSeries: 's1',
width: 16,
style: { // text style
color: 'white'
},
states: {
hover: {
fillColor: '#395C84' // darker
}
}
}]
});
<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>

Categories