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
},
Related
I have the following "area" chart, notice how the Y Axis values are not close enough which results in a very straight looking line.
Highcharts.chart("container", {
chart: { type: "area" },
xAxis: { type: "datetime" },
series: [
{
data: [
{ x: 1648959780000, y: 46245.62 },
{ x: 1648959840000, y: 46245.21 },
{ x: 1648959900000, y: 46237.67 },
{ x: 1648959960000, y: 46243.24 },
{ x: 1648960020000, y: 46252.89 },
{ x: 1648960080000, y: 46255.98 },
{ x: 1648960140000, y: 46253.31 },
{ x: 1648960200000, y: 46257.69 },
{ x: 1648960260000, y: 46254.07 },
{ x: 1648960320000, y: 46268.57 },
],
},
],
});
#container {
height: 400px;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Whereas if I change the type of chart to line, the Y Axis values are nicely spread. How can I achieve a similar result using the "area" chart?
Highcharts.chart("container", {
chart: { type: "line" },
xAxis: { type: "datetime" },
series: [
{
data: [
{ x: 1648959780000, y: 46245.62 },
{ x: 1648959840000, y: 46245.21 },
{ x: 1648959900000, y: 46237.67 },
{ x: 1648959960000, y: 46243.24 },
{ x: 1648960020000, y: 46252.89 },
{ x: 1648960080000, y: 46255.98 },
{ x: 1648960140000, y: 46253.31 },
{ x: 1648960200000, y: 46257.69 },
{ x: 1648960260000, y: 46254.07 },
{ x: 1648960320000, y: 46268.57 },
],
},
],
});
#container {
height: 400px;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
The area series uses the threshold which a default value is 0. You need to change this value to achieve the output that you want.
Demo: https://jsfiddle.net/BlackLabel/wosxmc83/
API: https://api.highcharts.com/highcharts/series.area.threshold
I'm trying to adapt my code with the newer version of highcharts and I have a problem with bubble chart with drilldown levels.
The code worked like a charm but in the version 9.3.3 (even in 10.0), only the first sub level is displayed correctly.
You can see a code here : https://jsfiddle.net/vegaelce/8nLumacp/
In this example, drilling in California sub-level displays correct years information. But drilling in Colorado or DC or Florida displays nothing.
This example worked with the library 9.1.2.
My series are defined as :
series: [{ name:'California',
data : [{
x: 4836171.3, y: 29828, z: 1953706.9,
drilldown: 'drill_California'
}],
},
{ name:'Colorado',
data : [{
x: 1327390, y: 8299, z: 527434,
drilldown: 'drill_Colorado'
}],
},
{ name:'DC',
data : [{
x: 1809005, y: 11525, z: 720978.0999999999,
drilldown: 'drill_DC'
}],
},
{ name:'Florida',
data : [{
x: 1252697.9, y: 7619, z: 524066.6,
drilldown: 'drill_Florida'
}],
},
],
drilldown: {
series: [{
name: "California",
id: "drill_California",
data: [{
name: '2016',x: 1595318.9, y: 9249, z: 627939.8,
},{
name: '2017',x: 1404929.6, y: 9817, z: 596923.6,
},{
name: '2018',x: 1729952.1, y: 10117, z: 688805.7,
},{
name: '2019',x: 105970.7, y: 645, z: 40037.8,
},],
dataLabels: {
enabled: true,
formatter: function () {
return this.key;}
}
},
{
name: "Colorado",
id: "drill_Colorado",
data: [{
name: '2016',x: 443088.5, y: 2669, z: 168450.9,
},{
name: '2017',x: 395947.7, y: 2787, z: 168011.2,
},{
name: '2018',x: 463399.3, y: 2685, z: 181716.8,
},{
name: '2019',x: 24954.5, y: 158, z: 9255.1,
},],
dataLabels: {
enabled: true,
formatter: function () {
return this.key;}
}
},
{
name: "DC",
id: "drill_DC",
data: [{
name: '2016',x: 599168.1, y: 3612, z: 230768.4,
},{
name: '2017',x: 593314.4, y: 4196, z: 249435.3,
},{
name: '2018',x: 586145.8, y: 3532, z: 229305.2,
},{
name: '2019',x: 30376.7, y: 185, z: 11469.2,
},],
dataLabels: {
enabled: true,
formatter: function () {
return this.key;}
}
},
{
name: "Florida",
id: "drill_Florida",
data: [{
name: '2016',x: 440506.9, y: 2561, z: 177894.7,
},{
name: '2017',x: 358862.3, y: 2482, z: 157490.4,
},{
name: '2018',x: 426437.3, y: 2403, z: 178357.5,
},{
name: '2019',x: 26891.4, y: 173, z: 10324,
},],
dataLabels: {
enabled: true,
formatter: function () {
return this.key;}
}
}]
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
Today my highcharts bubble chart stopped allowing me to select the bubbles: it was working through yesterday. Here is the code:
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: Euromonitor and OECD'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
}
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2
},
plotOptions: {
series: { allowPointSelect: true,
dataLabels: {
enabled: false,
format: '{point.name}'
}
}
},
series: [{
data: [
{ x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' },
{ x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany' },
{ x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland' },
{ x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands' },
{ x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden' },
{ x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' },
{ x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France' },
{ x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway' },
{ x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom' },
{ x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy' },
{ x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia' },
{ x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' },
{ x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary' },
{ x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal' },
{ x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand' }
]
}]
});
I recreated the problem in this fiddle:
http://jsfiddle.net/azq5nx8a/
Interestingly, if you enable dataLabels, then you can select the point by clicking on the data label. But even with dataLabels enabled, just clicking on the bubble and not the label does nothing (unless you've already selected the bubble using the data label: if you start in that state, you can select and deselect the bubble by just clicking on the bubble. Play around and see).
On Github it looks like there was an update last night related to bubble charts. I wonder if that caused this issue.
Can anyone get this to work, so the bubbles can be selected by clicking on the bubble and not a data label?
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'
}