Related
How can i update my tooltip when i clicked on toggle button?
I tried to add this (this.tooltip[0].update) on my button.toggle.onclickfunction():-
onclick: function () {
this.yAxis[0].update({
labels: {
formatter: function() {
return Highcharts.numberFormat((this.value / 1000000000).toFixed(2), 0, ',');
}
},
title: {
text: '<b>RM Billion</b>',
}
});
this.tooltip[0].update({
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br> ' + this.series.name + ' : RM <b>' + Highcharts.numberFormat((this.y / 1000000).toFixed(2), 0, ',') + '</b>';
}
}
});
}
I thought by adding this.tooltip[0].update would change/update the tooltip as coded above, but nothing change. How can i do this?
Below are my current codes:-
Highcharts.chart('containerImport', {
title: {
text: 'Imports from ' + dataTitle['titleName'] + ', ' + dataYear[0] + ' - ' + dataYear[dataYear.length - 1],
align: 'left',
margin: 50
},
subtitle: {
text: '',
x: -20
},
lang: {
toggleButtonTitle: 'Currency Format',
contextButtonTitle: 'Print Chart'
},
xAxis: {
title: {
text: '<b>YEAR</b>',
align: 'high'
},
categories: dataYear
},
yAxis: {
title: {
text: '<b>RM Million</b>',
style: {
fontFamily: 'Arial'
},
align:'high',
rotation:0,
y: -13,
},
labels: {
formatter: function() {
return Highcharts.numberFormat((this.value / 1000000).toFixed(2), 0, ',');
}
}
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br> ' + this.series.name + ' : RM <b>' + Highcharts.numberFormat((this.y / 1000000).toFixed(2), 0, ',') + '</b>';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: dataTitle['titleName'],
data: totalDataTrade
}],
exporting: {
enabled: true,
buttons: {
contextButton: {
_titleKey: 'contextButtonTitle',
},
toggle: {
_titleKey: 'toggleButtonTitle',
text: '$',
menuItems: [{
text: 'Billion',
onclick: function () {
this.yAxis[0].update({
labels: {
formatter: function() {
return Highcharts.numberFormat((this.value / 1000000000).toFixed(2), 0, ',');
}
},
title: {
text: '<b>RM Billion</b>',
}
});
}
}, {
text: 'Million',
onclick: function () {
this.yAxis[0].update({
labels: {
formatter: function() {
return Highcharts.numberFormat((this.value / 1000000).toFixed(2), 0, ',');
}
},
title: {
text: '<b>RM Million</b>',
}
});
}
}, {
text: 'Hundred Thousand',
onclick: function () {
this.yAxis[0].update({
labels: {
formatter: function() {
return Highcharts.numberFormat((this.value / 100000).toFixed(2), 0, ',');
// return Highcharts.numberFormat((this.value / 100000), 2, '.');
}
},
title: {
text: '<b>RM Hundred Thousand</b>',
}
});
}
}]
},
}
}
});
Any kind of helps would be appreciated! Thank you in advanced.
Move the tooltip property inside the series and then use Series.update()
onclick: function() {
this.series[0].update({
tooltip: {
pointFormat: 'tooltip changed'
}
});
}
example: https://jsfiddle.net/r4dfhkgy/
I am using Highcharts.
Can any one tell me how to assign different tooltip suffix value to different points of same series?
To show the tooltip like: this.X:this:y this.suffix value
I am using below code to bind Highcharts:
var options = {
chart: {
height: 122,
width: 387,
type: 'line',
borderWidth: 1,
borderColor: '#EBBA95',
borderRadius: 1
},
credits: {
enabled: false
},
title: {
text: titleText
},
subtitle: {
text: subtitletext
},
xAxis: {
title: {
text: xAxistitle
},
categories: [],
labels: { enabled: false }
},
yAxis: {
title: {
text: yAxistitle
},
labels: { enabled: true },
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
plotOptions: {
line: {
dataLabels: {
enabled: false,
style: {
textShadow: '0 0 3px white, 0 0 3px white'
}
},
events: {
legendItemClick: function () {
return false; // <== returning false will cancel the default action
}
},
showInLegend: true,
enableMouseTracking: true
},
/* tooltip: {
shared: true
//,
//formatter: function ()
//{
// return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>, in series ' + this.series.valueSuffix;
//}
},*/
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} KKKK </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
var series = this.series;
for (var count = 0; count < series.options.data.length; count++) {
var IndexOfSelectedDataValue = series.options.data.indexOf(this.y);
var IndexOfSelectedIDValue = series.options.vitalid[IndexOfSelectedDataValue];
var URL = CrmServerURL + 'main.aspx?etc=' + vitalsEntityObjectTypeCode + "&pagetype=entityrecord&id=%7b" + IndexOfSelectedIDValue + "%7D";
PIH.PIHClass.OpenUrl(URL);
break;
}
}
}
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [],
navigation: {
buttonOptions: {
enabled: false
}
}
};
seriesdata1.reverse();
seriesdata2.reverse();
var StartDate = seriesdata1[0].date;
var EndDate = seriesdata1[seriesdata1.length - 1].date;
document.getElementById("Fromdate").innerHTML = StartDate;
document.getElementById("Todate").innerHTML = EndDate;
if (seriesdata1.length > 0) {
options.series.push({ name: '', data: [], tooltip: '', vitalid: [] }); /// add new series
for (i = 0; i < seriesdata1.length; i++) {
options.xAxis.categories[i] = seriesdata1[i].date;
}
for (i = 0; i < seriesdata1.length; i++) {
options.series[0].name = seriesdata1[i].name;
options.series[0].data[i] = seriesdata1[i].data;
options.series[0].tooltip = seriesdata1[i].tooltip;
options.series[0].vitalid[i] = seriesdata1[i].vitalid;
}
}
if (seriesdata2.length > 0) {
options.series.push({ name: '', data: [], tooltip: '', vitalid: [] }); /// add new series
for (i = 0; i < seriesdata2.length; i++) {
options.series[1].name = seriesdata2[i].name;
options.series[1].data[i] = seriesdata2[i].data;
options.series[1].tooltip = seriesdata2[i].tooltip;
options.series[1].vitalid[i] = seriesdata2[i].vitalid;
}
}
$("#canvas").highcharts(options);
For example: for a Temperature graph I am showing 10 points in the graph, but different points have different unit of measurement like Fahrenheit & Celsius. I am passing unit of measurement as point Value suffix.
But in my case last applied Value suffix is applied to all points of same series.
I want tooltip as per their Unit of measurement/value suffix (eg. 15/5/2014 Temp 90 °C).
you can try some thing like this
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}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
}
You can use tooltip formatter and customise content of your tooltip, including conditions and custom logic.
Hi i tried tool tip formatter to use in following way
if (TooltipMeasureunit != '') {
Tempdata.push({ name: 'Temp', vitalid: response[count].attributes.ccx_vitalsid.value, data: Temperature, date: RecordDate,
tooltip: {
formatter: function () {
return valueSuffix = this.TooltipMeasureunit
}
}
});
}
else if (TooltipMeasureunit == '') {
Tempdata.push({
name: 'Temp', vitalid: response[count].attributes.ccx_vitalsid.value, data: Temperature, date: RecordDate,
tooltip: {
formatter: function () {
return valueSuffix=this.TooltipMeasureunit
}
//shared: false
}
});
I plan to put the data in y-axis in a mouseover event of my x-axis labels, so that when a user hovers on an x-axis label, it will display a summary text of the values in my stack chart.
Question is how do I access y-axis data inside my x-axis:{...} code
here's my code
http://jsfiddle.net/BkxhA/3/
$(function () {
var categoryImgs = {
'AIA': '<img src="http://dummyimage.com/60x60/ff6600/ffffff"><img> ',
'AMP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'AMP RPP':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'Asteron Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> ',
'Fidelity Life':'<img src="http://highcharts.com/demo/gfx/sun.png"><img> '
};
var totals = new Array();
var stackTotals = new Array();
var i = 5, j = 0;
//totals = HighchartsAdapter
function reverse() {
totals.reverse();
}
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Premium Summary'
},
yAxis: {
min: 0,
title: {
text: ''
},
labels: {
formatter: function () {
return '$' + this.value;
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray',
},
formatter: function () {
totals[i++] = this.total;
return '';
},
}
},
xAxis: {
categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'],
labels: {
x: 5,
useHTML: true,
formatter: function () {
var n = totals.shift();
return '<div class="stacktotal">$' + n + '</div><div class="myToolTip" title="Hello ' + this.value + '">' + categoryImgs[this.value] + '</div>';
},
events: {
mouseover: function () {
$('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>This should be the series y-axis data (this.series.data...something)<p>');
},
mouseout: function () {
$('#hoverboard').html('');
}
},
}
},
linkedTo: 0,
categories: ['AIA', 'AMP', 'AMP RPP', 'Asteron Life', 'Fidelity Life'],
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
},
format: '${y}'
}
}
},
series: [{
name: 'Policy Fee',
y:'$' + this.value,
data: [200.12, 290, 45.78, 71, 120]
}, {
name: 'WOP',
data: [150, 210.23, 150, 200, 100]
}, {
name: 'Income Protection',
data: [89, 400, 258.13, 212, 152]
}, {
name: 'Life Cover',
data: [150, 210.23, 150, 200, 100]
} ]
});
});
Looks like plugin has limitations - in event callback this is pointed to DOM element, instead of something in Highcharts.
To achieve what you need, you can add some custom attribute for created HTML tag in formatter, with info you need. For example passing index:
formatter: function () {
var axis = this.axis,
index = axis.categories.indexOf(this.value);
var n = totals.shift();
return '<div class="stacktotal" data-index="' + index + '">$' + n + '</div><div class="myToolTip" title="Hello ' + this.value + '">' + categoryImgs[this.value] + '</div>';
},
Then you can get that value in events:
mouseover: function () {
var chart = $("#container").highcharts(),
index = $(this).find('.stacktotal').attr("data-index");
console.log('Index', index); //index is index of category
var point = chart.series[0].data[index];
console.log('Point', point); // point for specific category in first series
$('#hoverboard').html('<img name="testimg" src="http://highcharts.com/demo/gfx/sun.png"><p>' + point.total + '<p>');
},
Demo with all: http://jsfiddle.net/BkxhA/4/
for my project I need to change the look of tooltip.
I found in the api documentation, to set useHTML to true, but it doesn't help.
here is my example:
tooltip: {
borderWidth: 0,
style: {
padding: 0
},
useHTML: true,
formatter: function(){
return '<div style="float:left"><small>' + this.series.name +
'</small></div><br/><div style="float:left;">test:</div>' +
'<div style="float:left;padding-left: 30px;"><b>' +
this.point.test +
'</b></div>';
}
}
http://jsfiddle.net/6tc6T/147/
Move the tooltip out of the plotOptions http://jsfiddle.net/ahZWS/.
var options = {
...
legend: {
enabled: false
},
tooltip: {
borderWidth: 0,
style: {
padding: 0
},
useHTML: true,
formatter: function(){
return '<div style="float:left"><small>' + this.series.name +
'</small></div><br/><div style="float:left;">test:</div>' +
'<div style="float:left;padding-left: 30px;"><b>' + this.point.test +
'</b></div>';
}
},
plotOptions: {
...
}
, series: seriesArr
};
Problem
When I have only 1 series to show with multiple users in highcharts bar graph it display on top of each other instead of next to each other. Below is the code am using. Please guide me in the right direction.
Also if I add 1 more date in any user's series it shows up properly but that is not the solution as I will always have 1 date on my graph.
JS fiddle link: http://jsfiddle.net/bhats1989/b33mN/3/
Code
$(function () {
$('#team_container').highcharts({
chart: {
type: 'bar',
//inverted: true,
renderTo: 'container',
zoomType: 'xy',
events: {
},
zIndex: 5
},
title: {
text: 'Team Activity Game',
x: -20 //center
},
subtitle: {
text: 'Click and drag in the plot area to zoom in and scroll',
x: -25 //center
},
xAxis: {
title: {
text: 'Week Ending'
},
type: 'datetime',
maxZoom: 24 * 3600000, // Two days
labels: {
rotation: -45,
align: 'right',
formatter: function() {
return Highcharts.dateFormat('%d/%m/%Y', this.value);
}
},
tickInterval: 24 * 3600 * 1000,
},
plotOptions: {
series: {
events: {
legendItemClick: function(event) {
if (!this.visible)
return true;
var seriesIndex = this.index;
var series = this.chart.series;
var j = series.length;
for (var i = 0; i < series.length; i++)
{
if (series[i].index != seriesIndex)
{
series[i].visible ? series[i].hide() : series[i].show();
series[j-1].hide();
}
}
return false;
}
}
}
},
yAxis: {
plotBands: [{ // mark the weekend
color: '#f4e3e7',
from: 0,
to: 15,
events: {
mouseover: function(e) {
team_tooltipUpdate();
}
},
zIndex: 3
}],
gridLineColor: null,
title: {
text: 'Distance (kms)'
},
plotLines: [{
color: '#FF0000',
width: 2,
value: 15 }]
},
tooltip: {
useHTML: true,
formatter: team_myFormatter
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [
{
name: 'Mark',
data: []
}, {
name: 'Joe',
data: [[Date.parse('7/28/2013 UTC'), 7.2954706108315 ]]
}, {
name: 'Max',
data: [[Date.parse('7/28/2013 UTC'), 25.668099736872 ]]
}, {
name: 'John',
data: [[Date.parse('7/28/2013 UTC'), 16.576099736872 ]]
} ,{
name: 'yellowline',
visible: false,
showInLegend: false,
data: []
}
]
});
});
function team_tooltipUpdate(){
var chart = $('#team_container').highcharts();
chart.tooltip.refresh(chart.series[4].points[0]);
}
function team_myFormatter(){
var game_parameter = 'running';
if(this.series.name == 'yellowline'){
return '<span style="color:Red;"><b>Danger Area</b></div>';
}else{
if(game_parameter == 'running'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +': '+ parseFloat(this.y).toFixed(2) +' kms</span>';
}else if(game_parameter == 'steps'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +', No. of Steps: '+ parseFloat(this.y).toFixed(2) +'</span>';
}else if(game_parameter == 'floors'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +', No. of Floors: '+ parseFloat(this.y).toFixed(2) +'</span>';
}else if(game_parameter == 'cycling'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +': '+ parseFloat(this.y).toFixed(2) +' kms</span>';
}else if(game_parameter == 'heartrate'){
return '<span style="color:'+ this.series.color + '"><b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%d\/%m\/%Y', this.x) +': '+ parseFloat(this.y).toFixed(2) +' BPM</span>';
}
}
}
You have to set your pointRange option for series.
pointRange : On linear and datetime axes, the range will be computed as the distance between the two closest data points.
As there is only one point, Highchart won't be able to calculate the pointRange...
To be sure that it will work, put it at the tickInterval value.
// ...
plotOptions: {
series: {
pointRange: 24 * 3600 * 1000, // tickInterval has the same value
// ...
},
// ...
},
// ...
For your question about First and Last label :
xAxis: {
// ...
showFirstLabel: false,
showLastLabel: false,
// ...
}
Look at this Example.
The problem is that with one point Highcharts won't be able to calculate pointRange for any of series. In that case set directly pointRange for series, see: http://jsfiddle.net/b33mN/5/
In the example, pointRange = tickInterval, it's probably you want to achieve.
I know this is a late but helpful answer, I use pointPlacement attribute of the config when using column charts and here is a plunker that shows how to use it to make columns stay next to each other .Results: http://plnkr.co/edit/uqZ4LEugMefLD6WSzHZT?p=preview
$(function () {
$('#container2').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'category',
categories:["Population","Kokulation"]
},
legend: {
enabled: false
},
plotOptions: {
series: {
pointPadding: 0,
groupPadding: 0,
pointWidth:20
},
},
tooltip: {
shared: false
},
series: [{
name: 'Population',
data: [
['Shanghai', 23.7],
['Lagos', 16.1]
],
pointPlacement:0.23
},
{name:"Kokulation",
data:[
['Istanbul', 14.2],
['Karachi', 14.0]
],
pointPlacement:-0.2146
}
]
});
});