We Keep Coding

Highstock tooltip Formatter not able to display extra data

We started to develop in HighCharts but realised we needed to move to HighStock for the Zoom/slider functionality.
We had a graph working perfectly with the tooltip to display exactly the data we required as shown below from Highcharts.
To achieve this within in HighStock we just had the following code to format the ToolTip.
tooltip: {
headerFormat: "",
useHTML: true,
formatter: function () {
return '<span style="font-size: 10px">' + Highcharts.dateFormat('%I:%M:%S %P - %a, %e %b, %y', new Date(this.x)) + '</span><br/><span style="color:' + this.color + '">\u25CF</span> <b>' + this.point.name + '</b><br/>';
}
},
We have attempted on the switch to HighStock to implement the same formatting, but all we receive through to the tooltip where it say's 'REASON_TIMED' is undefined as below.
our data object myData is created as follows :-
myData .push([Date.parse(obj.FixTimeLocal), obj.State, obj.Flags]);
This object worked correctly with the Fixtime being the X, state being the y and flags being a text description which would be populated in the ToolTip. We used keys to name the data x,y,name so we could access this.point.name. to add extra text to tooltip. Where are we going wrong ? we have tried for a couple of days now and can not get the data through.
Highcharts.stockChart('container', {
//new chart style
rangeSelector: {
selected: 1
},
title: {
text: 'Test Graph'
},
xAxis: {
type: 'datetime'
},
yAxis: {
categories: ['Unknown', 'State 1', 'Disarmed', 'Armed', 'Service Timed', 'Unauthorised', 'Alert', 'Watch', 'Alarm'],
title: {
useHTML: true,
text: 'Alert Type'
}
},
tooltip: {
headerFormat: "",
useHTML: true,
formatter: function () {
var s = '<span style="font-size: 10px">' + Highcharts.dateFormat('%I:%M:%S %P - %a, %e %b, %y', new Date(this.x)) + '</span>';
$.each(this.points, function () {
s += '<br/><span style="color:' + this.color + '">\u25CF</span><b>' + this.point.name + '</b><br/>'; // Code falls over here this.point.name is not recognised.
});
return s;
}
},
series: [{
type: 'areaspline',
keys: ['x', 'y', 'name'],
data: myData,
marker: {
enabled: true,
radius: 1.5
},
threshold: null,
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.Color(Highcharts.getOptions().colors[3]).setOpacity(0.5).get('rgba')],
[1, Highcharts.Color(Highcharts.getOptions().colors[3]).setOpacity(0).get('rgba')]
]
},
color: Highcharts.getOptions().colors[3],
lineWidth: 0.5,
threshold: null,
}]
});

You can do this
see your html would be
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
And code might like this
Highcharts.chart('container', {
rangeSelector: {
selected: 1
},
title: {
text: 'Test Graph'
},
// Its your X data
xAxis: {
categories: ['2017/05/01', '2017/05/02', '2017/05/03', '2017/05/04', '2017/05/05', '2017/05/06','2017/05/07', '2017/05/08', '2017/05/09', '2017/05/10']
},
yAxis: {
//categories: ['Unknown', 'State 1', 'Disarmed', 'Armed', 'Service Timed', 'Unauthorised', 'Alert', 'Watch', 'Alarm'],
title: {
useHTML: true,
text: 'Alert Type'
}
},
tooltip: {
headerFormat: "",
useHTML: true,
formatter: function () {
var s = '<span style="font-size: 10px; width:100%;">' + Highcharts.dateFormat('%I:%M:%S %P - %a, %e %b, %y', new Date(this.x)) + '</span>';
$.each(this.points, function () {
s += '<br/><span style="color:' + this.color + '">\u25CF</span><b>' + this.point.name + '</b><br/>'; // Code falls over here this.point.name is not recognised.
});
return s;
},
},
series: [{
type: 'areaspline',
// its your yAxis category
name: "Unknown",
// Its your Y Data
data: [5,10,56,22,54,35,32,26,36],
},{
type: 'areaspline',
name: "State 1",
// Its your Y Data value
data: [10,30,59,22,24,55,52,66,46],
}]
});
Here is live : https://jsfiddle.net/jalayoza/eaue85rb/6/
Hope this help

Thanks to – Grzegorz Blachliński for identifying the issue.
Within my series I had to set the following. Which is now working with my data and I can target the point.name to get it to display in the Tooltip.
dataGrouping: {
enabled: false
},

How to change the scale of an axis with HighChart

I'm using HighChart to display the memory usage of some containers. The problem is that sometimes the scale is in K sometimes in M and sometimes with nothing (like the picture bellow):
And this is how I create my HighChart:
var cursor = Template.currentData();
liveChart = Highcharts.chart(cursor.chart_id, {
title: {
text: 'Memory usage of the controlcontainers_mongo_1'
},
xAxis: {
type: 'datetime',
},
yAxis: {
title: {
text: 'usage'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>';
}
},
series: [{
type: 'line',
name: 'memory usage',
data: []
}]
});
[EDIT] Maybe it could be helpful to see the entire graph so there is it:
This is my formatter if someone need it:
formatter: function() {
var usage = this.value;
if((usage >= 1000000)&&(usage < 1000000000)){
return (usage/1000000).toFixed(2) + "MB";
}else if (usage >= 1000000000) {
return (usage/1000000000).toFixed(2) + "GB";
}else{
return usage + "KB";
}
}

You can round up the values in y-axis formatting function
var cursor = Template.currentData();
liveChart = Highcharts.chart(cursor.chart_id, {
title: {
text: 'Memory usage of the controlcontainers_mongo_1'
},
xAxis: {
type: 'datetime',
},
yAxis: {
title: {
text: 'usage'
},
labels: {
formatter: function() {
//This will round the value, but you can do anything to this value now
return this.value.toFixed(2);
}
},
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>';
}
},
series: [{
type: 'line',
name: 'memory usage',
data: []
}]
});
Read more here

Only one function in highcharts will function

I'm trying to manipulate a chart with input boxes. Each input box should correspond to a bar. In my code, I can get the first function at the bottom of the highcharts to work, but identical code with the bar changed and the input id doesnt work. Function in question is the last function with season-2 as id.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false
},
xAxis: {
categories: ['2016-17', '2017-18', '2018-19', '2019-20', '2020-21', '2021-22'],
title: {
text: 'Season'
}
},
yAxis: [{
title: {
text: '$ Dollars'
}
}],
plotOptions: {
series: {
borderColor: '#2c3e50',
point: {
events: {
drag: function(e) {
$('#drag').html(
'Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.y, 2) + '</b>');
if (this.category == "2016-17"){
$('#season-1').val(Highcharts.numberFormat(e.y, 2));
}
if (this.category == "2017-18"){
$('#season-2').val(Highcharts.numberFormat(e.y, 2));
}
if (this.category == "2018-19")
{
$('#season-3').val(Highcharts.numberFormat(e.y, 2));
}
if (this.category == "2019-20"){
$('#season-4').val(Highcharts.numberFormat(e.y, 2));
} if (this.category == "2020-21"){
$('#season-5').val(Highcharts.numberFormat(e.y, 2));
}
},
drop: function() {
$('#drop').html(
'In <b>' + this.series.name + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 2) + '</b>');
}
}
},
stickyTracking: false
},
column: {
stacking: 'normal'
},
line: {
cursor: 'ns-resize'
}
},
tooltip: {
yDecimals: 2
},
series: [{
name: 'Salary Cap',
data: [94000000, 102000000, 108000000, 109000000, 114000000]
}, {
name: 'Tax Cap',
data: [113000000, 122000000, 130000000, 132000000, 139000000]
}, {
name: 'New Contract',
data: [10996155, 10996155, 10996155, 10996155, 10996155],
draggableY: true,
// drag: function() { console.log(arguments); },
dragMinY: 0,
type: 'column',
minPointLength: 2,
color: 'whitesmoke'
}, {
name: 'Current Payroll',
data: [110492645, 103423474, 97903566, 62944822, 28751775],
//draggableX: true,
draggableY: false,
dragMinY: 0,
type: 'column',
minPointLength: 2,
color: '#2c3e50'
}]
}, function(chart) {
$('#season-1').change(function() {
var val = parseInt(this.value) || 0;
chart.series[3].data[0].update({
y: val
});
})
},
function(chart) {
$('#season-2').change(function() {
var val = parseInt(this.value) || 0;
chart.series[3].data[1].update({
y: val
});
})
});
http://jsfiddle.net/twq6gb7d/

What I did is I isolated the change functions from inside the highcharts initialization function, and let JQuery handle it by selecting the container of the chart and calling the highchart function.
Snippet of the code:
.... //rest of the code
dragMinY: 0,
type: 'column',
minPointLength: 2,
color: '#2c3e50'
}]
}); //end of the highchart initialization
$('#season-1').change(function() {
var val = parseInt(this.value) || 0;
$('#container').highcharts().series[3].data[0].update({
y: val
});
});
... // other change functions
Working JSFiddle here.

Include links in Highcharts tooltip and make the point clickable so that the links can be clicked

I have a graph which contains spline charts and scatter charts. Now on each scatter graph, there is a tooltip which has a link. Whenever i try to go on that link, the tooltip shifts off. I want that the tooltip should remain there once i click the scatter graph so that i can click the link.
$(function () {
$('#barChart').highcharts({
chart: {
title: {
text: '',
style: {
color: '#cc0000',
fontWeight: 'bold'
}
},
xAxis: {
categories: [{{{timeZoneTime}}}]
},
yAxis: [{ /* Primary yAxis */
labels: {
format: '{value}%',
style: {
color: '#cc0000'
}
},
title: {
text: 'Failure Percentage',
style: {
color: '#cc0000'
}
}
}, { /* Secondary yAxis */
title: {
text: 'Success Percentage',
style: {
color: '#009900'
}
},
max: 100,
labels: {
format: '{value} %',
style: {
color: '#009900'
}
},
opposite: true
}],
labels: {
items: [{
html: '',
style: {
left: '2px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
credits: {
enabled: false
},
series: [{
type: 'column',
name: 'Success',
color: '#7deda2',
yAxis: 1,
tooltip: {
pointFormatter: function(){
return "Success: " + this.y + "%" + "<br />" + "Success docs: " + toolTipSuccess[this.series.data.indexOf( this )] + "<br />";
}
},
data: [{{barSuccess}}]
},
{
type: 'scatter',
name: 'incidents',
yAxis: 1,
data: [[0,100],[1,100],[2,100],[3,100],[4,100],[5,100],[6,100],[7,100],[8,100],[9,100],[10,100],[11,100],[12,100],[13,100],[14,100],[15,100],[16,100],[17,100],[18,100],[19,100],[20,100],[21,100],[22,100],[23,100],[24,100]],
tooltip: {
pointFormatter: function(){
return "" + toolTip[this.series.data.indexOf( this )] + "";
}
}
},
{
type: 'spline',
name: 'Failure',
tooltip: {
pointFormatter: function(){
return "Failure: " + this.y + "%" + "<br />" + "Failure docs: " + toolTipFailure[this.series.data.indexOf( this )] + "<br />";
}
},
data: [{{barFailure}}],
marker: {
lineWidth: 3,
lineColor: Highcharts.getOptions().colors[8],
fillColor: 'red'
}
},
{{#if lu}}
{
type: 'spline',
name: 'Unknown',
tooltip: {
pointFormatter: function(){
return "Unknown: " + this.y + "%" + "<br />" + "Unknown docs: " + toolTipUnknown[this.series.data.indexOf( this )] + "<br />";
}
},
data: [{{barUnknown}}],
marker: {
lineWidth: 3,
lineColor: 'blue',
fillColor: '#87CEFA'
}
}
{{/if}}
]
});
});
Now for keeping the tooltip fixed after clicking the scatter chart, there was a code on stackoverflow. BUt i don't know where to place this to make it work. I tried everywhere but it wasn't working. I just want this feature for the scatter graph. This is the code.
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
if (cloneToolTip)
{
chart.container.firstChild.removeChild(cloneToolTip);
}
cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
chart.container.firstChild.appendChild(cloneToolTip);
}
}
}
}
},
I also wanted to put some links in the tooltip of the scatter chart. I tried doing it like this but this did not work.
{
type: 'scatter',
name: 'incidents',
yAxis: 1,
data: [[0,100],[1,100],[2,100],[3,100],[4,100],[5,100],[6,100],[7,100],[8,100],[9,100],[10,100],[11,100],[12,100],[13,100],[14,100],[15,100],[16,100],[17,100],[18,100],[19,100],[20,100],[21,100],[22,100],[23,100],[24,100]],
tooltip: {
pointFormatter: function(){
return "" + toolTip[this.series.data.indexOf( this )] + "";
}
}
},
Can anyone help me out in this? Been stuck at this for a long time now. Thanks.

Why isn't the xAxis showing the date?

I have a question related to HighCharts. Below is my code for implementing a highchart with integer values on yaxis and date on x-axis. I am getting my data from database both date and values.
The x-axis date and time isn't displayed correctly. In my database it looks like that ,2015-04-27 15:26:41.463 .
var a = [];
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
xAxis[0].setCategories(x);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
categories: a
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 1);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
data: series
}]
});
UPDATE
This is what I have reached now
.success(function (point) {
for (i = 0; i < point.length; i++) {
myDate[i] = point[i].date_time;
value[i] = point[i].value_db;
}
for (j = 0; j < myDate.length; j++) {
var temp = new Array(myDate[j], value[j]);
mySeries[j] = temp;
}
DrawChart(mySeries, myDate, value);
})
function DrawChart(series, x, y) {
//Fill chart
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
//tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: series
}]
});
}
UPDATE2
Help Please.

You'll have to change myDate[i] = point[i].date_time; to:
myDate[i] = parseInt((point[i].date_time).substring(6, 19));
So that it will contain the UTC date format of the datetime.
Then you will have to use xAxis.labels.formatter like this:
xAxis: {
labels: {
formatter: function() {
var date = new Date(this.value);
return date.getFullYear() + "-" +
date.getMonth() + "-" +
date.getDate() + " " +
date.getHours() + ":" +
date.getMinutes() + ":" +
date.getSeconds();
}
}
}
to tell the chart how to show it's xAxis labels.
And for showing more labels in yAxis, you can use:
yAxis: {
tickInterval: 100 // if you want the labels to show every 100 values
}