Highcharts: dynamic update stacked area with extra custom data - highcharts

I want to display custom prompt info in stacked area chart using the technique referred in (jQuery Highchart) Is there any way to put extra custom data inside Tooltip Box?
The chart works fine on the initial data, but does not working when dynamic adding new Points.
The source code is in http://jsfiddle.net/ukNPz/1/
$(function () {
var clusterInfoChart;
var clusterOptions = {
chart: {
type: 'area',
renderTo: 'container',
events: {
load: function () {
S = this.series;
setInterval(function () {
var seconds = Math.round(new Date() / 1000);
seconds = seconds - 1397529601 + 1235;
console.log(seconds);
var shift = S[0].data.length > 10;
S[0].addPoint([seconds, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}], true, shift);
S[1].addPoint([seconds, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}], true, shift);
clusterInfoChart.redraw();
}, 3000);
}
}
},
title: {
text: 'clusterInfo'
},
xAxis: {
categories: [
'1205', '1210', '1215', '1220', '1225', '1230', '1235'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Events'
},
labels: {
formatter: function () {
return this.value.y;
}
}
},
tooltip: {
formatter: function () {
return this.point.yinfo.replace(";", "<br>");
}
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: 'Alert',
data: [
{
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}, {
y: 2,
yinfo: '192.168.119.10:cpuwarn;192.168.119.11:memwarn'
}, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}, {
y: 2,
yinfo: '192.168.119.10:cpuwarn;192.168.119.11:memwarn'
}, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}, {
y: 2,
yinfo: '192.168.119.10:cpuwarn;192.168.119.11:memwarn'
}
]
}, {
name: 'Warn',
data: [
{
y: 0,
yinfo: ''
}, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}, {
y: 0,
yinfo: ''
}, {
y: 2,
yinfo: '192.168.119.10:cpuwarn;192.168.119.11:memwarn'
}, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}, {
y: 0,
yinfo: ''
}, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}
]
}]
};
Highcharts.setOptions({
global: {
useUTC: false
}
});
clusterInfoChart = new Highcharts.Chart(clusterOptions);
});

Just this format isn't proper:
[seconds, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}]
Should be:
{
x: seconds,
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}

Related

I want to show tooltip on mouse hover of every coordinate in angular-highchart, it should show x and y axis value in tooltip or label

chart = new Chart({
chart: {
type: "line",
// height : 1000
// height: 55 + '%',
height: (9 / 16) * 100 + "%",
// width: 1200,
},
title: {
text: "",
},
credits: {
enabled: false,
},
legend: {
title: {
text: "OrderNumber",
style: {
fontStyle: BOLD,
},
},
layout: "vertical",
align: "right",
verticalAlign: "top",
borderWidth: 1,
floating: true,
backgroundColor: WHITE,
},
xAxis: {
startOnTick: true,
endOnTick: true,
title: {
text: this.xLabel,
style,
},
type: CTYPE,
gridLineColor: BLACK,
// min:
// this.chartData != undefined
// ? Math.log10(Math.ceil(Math.min(this.chartData.series) / 10) * 10)
// : this.xMin,
max: this.xMax,
gridLineWidth: 1,
lineColor: BLACK,
minorGridLineColor: BLACK,
lineWidth: 1,
tickLength: 20,
tickInterval: 1,
minorTickInterval: 0.1,
minorGridLineWidth: 0.5,
// animation: false,
labels: {
formatter: function () {
var raise = require("superscript-text");
let num = Math.log10(this.value as number).toPrecision(1);
let base = "10";
let final = base + raise(num.toString());
return final;
},
},
},
yAxis: {
startOnTick: true,
endOnTick: true,
title: {
text: this.yLabel,
style,
},
max: this.yMax,
min: this.yMin,
type: CTYPE,
lineColor: BLACK,
lineWidth: 1,
gridLineColor: BLACK,
minorGridLineColor: BLACK,
gridLineWidth: 1,
tickLength: 20,
tickInterval: 1,
minorTickInterval: 0.1,
minorGridLineWidth: 0.5,
labels: {
formatter: function () {
var raise = require("superscript-text");
let num = Math.log10(this.value as number);
let base = "10";
let final = base + raise(num.toString());
return final;
},
},
},
plotOptions: {
series: {
stickyTracking: false,
marker: {
enabled: false,
},
states: {
hover: {
enabled: false,
},
inactive: {
opacity: 1,
},
},
animation: false,
visible: true,
},
line: {
events: {
legendItemClick: function (event) {
this.selectedItemList.forEach((item) => {
if (event.target.options.id === item.product.index) {
item.product.toggleSlashEye = !item.product.toggleSlashEye;
let count = 0;
this.selectedItemList.forEach((item) => {
if (item.product.toggleSlashEye === false) count++;
});
if (count === this.selectedItemList.length) this.isSeriesVisible = true;
else this.isSeriesVisible = false;
}
});
}.bind(this),
},
},
// animation: false,
},
tooltip: {
enabled: true,
followPointer: true,
formatter: function () {
return `<b>x = ${this.y}</b> y = <b>${this.x} </b>`;
},
},
series: [],
});
currnet code status - currently I am showing tooltip on series only.
expected - I want to show the tooltip on the locations where the yaxis and xaxis graph lines cross.

Highcharts - How to show intermediate values on Area chart

I have the following chart: https://jsfiddle.net/w7jm2n6u/
Highcharts.chart('container', {
chart: {
type: 'area',
zoomType: 'x'
},
exporting: {
enabled: false
},
title: {
text: ''
},
legend: {
enabled: false
},
xAxis: {
type: 'datetime',
title: {
enabled: false
},
min: Date.UTC(2018, 10, 1)
},
yAxis: {
title: {
enabled: false
},
labels: {
formatter: function() {
return this.value / 1000;
}
},
max: 2000
},
tooltip: {
split: false,
},
plotOptions: {
area: {
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
},
series: {
trackByArea: true,
stickyTracking: false,
}
},
series: [{
name: 'Exceeds',
color: '#0000FF',
fillOpacity: 1,
marker: {
enabled: false,
},
data: [
{
x: Date.UTC(2018, 8, 1),
y: 2000
},{
x: Date.UTC(2019, 0, 1),
y: 2000
}, {
x: Date.UTC(2019, 1, 1),
y: 2000
}, {
x: Date.UTC(2019, 2, 1),
y: 2000
}],
}, {
name: 'Meets',
color: '#00FF00',
fillOpacity: 1,
marker: {
enabled: false,
},
data: [
{
x: Date.UTC(2018, 8, 1),
y: 700
},{
x: Date.UTC(2019, 0, 1),
y: 800
}, {
x: Date.UTC(2019, 1, 1),
y: 700
}, {
x: Date.UTC(2019, 2, 1),
y: 800
}],
}, {
name: 'Minimum',
color: '#FFFF00',
fillOpacity: 1,
marker: {
enabled: false,
},
data: [
{
x: Date.UTC(2018, 8, 1),
y: 400
},{
x: Date.UTC(2019, 0, 1),
y: 400
}, {
x: Date.UTC(2019, 1, 1),
y: 400
}, {
x: Date.UTC(2019, 2, 1),
y: 400
}],
}, {
name: 'Below Minimum',
color: '#FF0000',
fillOpacity: 1,
marker: {
enabled: false,
},
data: [
{
x: Date.UTC(2018, 8, 1),
y: 100
},{
x: Date.UTC(2019, 0, 1),
y: 200
}, {
x: Date.UTC(2019, 1, 1),
y: 300
}, {
x: Date.UTC(2019, 2, 1),
y: 320
}],
},
{
name: 'Data',
color: '#000000',
type: 'line',
data: [{
x: Date.UTC(2019, 0, 3),
y: 50
},
{
x: Date.UTC(2019, 0, 15),
y: 500
},
{
x: Date.UTC(2019, 1, 4),
y: 1000
},
{
x: Date.UTC(2019, 1, 15),
y: 1400
},
{
x: Date.UTC(2019, 1, 28),
y: 1900
},
]
},
]
});
Ideally, I would like to be able to hover over each area and see a tooltip with the value at that point in time for each of the 4 areas. For instance, between January 1st and February 1st, the Below Minimum (red) value ranges from 200 to 300. If I were to put my mouse halfway between those dates, I would want to see 'Below Minimum: 250'. Is there a way to achieve this?
If not, I would at least like the current tooltip to always show the previous point value instead of whichever it is closest to. If I hover around 12/2018, I want to see the point from Sept 1, 2018, not January 1, 2019. Essentially these are start dates for the values and are only valid on or after the date.
You need to increase the density of points. Below you can find an example how you can do it programmatically:
chart: {
type: 'area',
events: {
load: function() {
var series = this.series,
iterations = 2,
i = 0,
newData = [];
for (; i < iterations; i++) {
series.forEach(function(s) {
newData = [];
s.points.forEach(function(p, j) {
if (j) {
newData.push(
[
s.points[j - 1].x +
(p.x - s.points[j - 1].x) / 2,
s.points[j - 1].y +
(p.y - s.points[j - 1].y) / 2
],
[p.x, p.y]
);
} else {
newData.push([p.x, p.y]);
}
});
s.setData(newData, false);
});
this.redraw(false);
}
}
}
},
Live demo: https://jsfiddle.net/BlackLabel/d8jq9bvh/
API Reference: https://api.highcharts.com/highcharts/chart.events.load

Highcharts bug - label formatter function does not fire with multiple axis

I have a chart with multiple yAxis and I want to format each one differently. However, it seems with multiple yAxis, the label formatter function does not fire at all. Here's my options:
{
chart: {
backgroundColor: 'transparent',
pinchType: 'none',
height: 320,
events: {
load: (e) => {
}
}
},
plotOptions: {
line: {
states: {
hover: {
enabled: true
}
},
animation: {
duration: 750
}
},
series: {
lineWidth: 2,
}
},
series : [
{ name: 'charts',
type: 'line',
id: 0,
dataGrouping: {
groupPixelWidth: 8
},
},
{ name: 'marketcap',
type: 'line',
id: 1,
color: '#1fd3a3',
dataGrouping: {
groupPixelWidth: 8
},
},
{ name: 'volume',
type: 'area',
id: 2,
color: '#ddd',
lineWidth: 1,
dataGrouping: {
groupPixelWidth: 8
},
}
],
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
},
// responsive: {
// rules: [{
// condition: {
// maxWidth: 500
// },
// }]
// },
xAxis: {
// crosshair: {
// width: 1,
// color: 'rgba(255,255,255,.5)'
// },
visible: true,
type: 'datetime'
},
yAxis: [
{
opposite: false,
gridLineWidth: 0,
minorGridLineWidth: 0,
height: '75%',
tickAmount: 5,
labels: {
formatter: () => {
// this does not fire
console.log('firing!!');
return this.value
}
}
},
{
opposite: true,
gridLineWidth: 0,
minorGridLineWidth: 0,
height: '75%',
tickAmount: 5
},
{
top: '75%',
height: '25%',
opposite: false,
gridLineWidth: 0,
minorGridLineWidth: 0,
visible: false,
},
],
tooltip: {
followPointer: true,
shared: true,
},
credits: { enabled: false }
}
Notice that I have 3 yAxis, and within each of those I have different keys and values. I need to have a custom format for each, but when I try to use the formatter function, nothing happens. Using the format string value works, but it does not allow me to format the string the way I want. Any ideas?

Highcharts yaxis negative values error

I am using HighCharts to ploot some graph. I want my y-aixs to range between -1 to +1. When i set max=1 and min=-1 for y-axis, it does not work. Is there another way of implementing this. Below is the my code example.
$(opts.containerSelector).find('.chart-container').highcharts({
chart: {
events: {
load: loadLegendSelection
},
},
plotOptions: {
area: {
fillOpacity: 0.7
},
spline: {
marker: {
radius: 3
}
},
series: {
events: {
legendItemClick: storeLegendSelection
}
}
},
legend: {
},
loading: {
labelStyle: { "position": "relative", "top": "45%", "font-weight": "300", "color": "#29303a", "font-size": "22px" }
},
xAxis: {
gridLineDashStyle: 'dash',
gridLineColor: '#c2dce6',
gridLineWidth: 1,
min: minDate,
max: maxDate,
type: 'datetime',
labels: {
formatter: function() {
return formatTimestampTime(this.value);
}
},
events : {
afterSetExtremes : afterSetExtremes.bind(this, opts)
},
minRange: 3600 // one minute
},
yAxis: {
max: 1,
min: -1,
endOnTick: false,
gridLineDashStyle: 'dash',
gridLineColor: '#c2dce6',
gridLineWidth: 1,
labels: {
formatter: function() {
return formatMegawatts(this.value);
}
},
showFirstLabel: false,
title: ''
},
series: convertedData,
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
formatter:
function() {
return '<b>' + formatTimestampDateTimeWithSeconds(this.x) + '</b><br>' + formatMegawatts(this.y) + ' ('+ this.series.name + ')';
}
}
});
you can try setting min and max as given below.
yAxis: [{
max:1,
min: -1,
allowDecimals: false,
endOnTick: false,
gridLineWidth: 0,
labels: {
style: {
color: '#767676'
}
},
offset: -10,
title: {
text: 'Inv ' + val_qty,
"textAlign": 'top',
"rotation": 0,
x: 60,
y: yaxisVal,
style: {
color: '#767676',
fontWeight: 'bold'
}
}
}, {
allowDecimals: false,
min: 0,
endOnTick: false,
gridLineWidth: 0,
title: {
text: y2axisname,
"textAlign": 'top',
"rotation": 0,
x: -75,
y: yaxisVal,
style: {
color: '#767676',
fontWeight: 'bold'
}
},
offset: -10,
labels: {
format: '{value}',
style: {
color: '#767676'
}
},
opposite: true
}],

HighChart not showing anything

Can anyone maybe tell me what I am doing wrong here. Because my Chart shows the X values but my Y values does not plot on the chart.
Note reason for this x: and y: is because I am using dotnet highchart helper.
chart: { renderTo:'chart_0_container', backgroundColor: '#FFFFFF', className: 'chart1', defaultSeriesType: 'line', marginRight: 10, plotShadow: false, resetZoomButton: { position: { align: 'left' } }, zoomType: 'xy' },
xAxis: { allowDecimals: false, type: 'linear' },
yAxis: [{ labels: { formatter: function () {return Highcharts.numberFormat(this.value,2,'.' ,' ');} }, max: 0, title: { text: '' } }],
legend: { enabled: true },
tooltip: { enabled: true, formatter: function() { return '<span style="color:' + this.series.color + ';">●</span> ' + this.series.name + ': <b>' + Highcharts.numberFormat(this.y,',','.') + '</b><br/>' + Highcharts.dateFormat(' %Y-%m-%d %H:%M (%A)' , new Date(this.x)); } },
title: { text: '' },
plotOptions: { line: { marker: { enabled: true } } },
exporting: { enabled: true, filename: 'TrendExport' },
series: [{ data:
[{ x: 49.898418, y: 21.32 },
{ x: 49.882478, y: 21.32 },
{ x: 51.759454, y: 21.57 },
{ x: 51.385514, y: 21.56 },
{ x: 50.678916, y: 21.47 },
{ x: 50.226594, y: 21.35 },
{ x: 49.956602, y: 21.25 },
{ x: 49.841858, y: 21.24 },
{ x: 49.865894, y: 21.28 },
{ x: 49.845258, y: 21.31 },
{ x: 49.797864, y: 21.21 },
{ x: 49.880792, y: 21.29 },
{ x: 50.863658, y: 21.31 },
{ x: 50.017988, y: 21.21 },
{ x: 49.98614, y: 21.21 },
{ x: 50.105496, y: 21.29 },
{ x: 49.712604, y: 21.19 },
{ x: 49.714074, y: 21.2 },
{ x: 49.756014, y: 21.19 },
{ x: 49.817874, y: 21.23 },
{ x: 49.798772, y: 21.21 },
{ x: 50.006356, y: 21.3 },
{ x: 50.06892, y: 21.32 },
{ x: 49.77289, y: 21.21 },
{ x: 49.700852, y: 21.2 },
{ x: 49.653704, y: 21.19 },
{ x: 49.736278, y: 21.21 },
{ x: 49.757966, y: 21.21 },
{ x: 49.7942, y: 21.22 },
{ x: 49.75787, y: 21.21 }], name: 'ABSA Capital Durban Incomer (kVAr)' }]
Thanks you in advance.
Ideally you should get sorted data from back-end logic and provide that to your chart .If it can't be in sorted order do following :
Put your series data in a variable and sort the data using:
var dataToSort = [{ x: 49.898418, y: 21.32 },
{ x: 49.882478, y: 21.32 },
{ x: 51.759454, y: 21.57 },
{ x: 51.385514, y: 21.56 },
{ x: 50.678916, y: 21.47 },
{ x: 50.226594, y: 21.35 },
// .......and so on
dataToSort.sort(function(a, b) {
return parseFloat(a.x) - parseFloat(b.x);
});
Also remove the date-formatter in tooltip, Itsdoesn't seem that your data has any timestamp or UTC date in x field .
Also as mentioned by #mekhatria remove max:0
See Working fiddle here
You have max:0 in yAxis.
Fix it here :), check jsfiddle
yAxis: [{
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value, 2, '.', ' ');
}
},
//max: 0,
title: {
text: ''
}
}],
legend: {
enabled: true
},

Resources