On the following chart: https://jsfiddle.net/fx4bnhzm/1/ with the following rangeSelector.buttons:
buttons: [{
type: 'hour',
count: 8,
text: '1s',
dataGrouping: {
forced: true,
units: [['second', [1]]]
}
}, {
type: 'day',
count: 1,
text: '1min',
dataGrouping: {
forced: true,
units: [['minute', [1]]]
}
}, {
type: 'day',
count: 3,
text: '5min',
dataGrouping: {
forced: true,
units: [['minute', [5]]]
}
}, {
type: 'day',
count: 7,
text: '15min',
dataGrouping: {
forced: true,
units: [['minute', [15]]]
}
}, {
type: 'day',
count: 14,
text: '1h',
dataGrouping: {
forced: true,
units: [['hour', [1]]]
}
}, {
type: 'day',
count: 30,
text: '4h',
dataGrouping: {
forced: true,
units: [['hour', [4]]]
}
}, {
type: 'year',
count: 1,
text: '1D',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'year',
count: 2,
text: '1W',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: '1M',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}]
when I change type chart to Line chart, and turn on Current Price Indicators the current price line is correct but the label shows the wrong point
Is it a bug in Highcharts / Highstocks or is it something wrong in the data?
Related
The example Data grouping by buttons from the Highcharts API: https://api.highcharts.com/highstock/rangeSelector.buttons
has a custom data grouping set through the rangeSelector->buttons->dataGrouping
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Day',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Week',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Month',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}],
},
Unfortunately the data grouping is dropped when visible data is changed in the navigator (the selected Weekly data grouping is changed to Daily grouping is used)
The same happens when the date range is changed through the calendar (rangeSelector->input).
Is there a way to keep the data grouping after changing date range in navigator or calendar?
Set in buttons options buttons.preserveDataGrouping to true.
When buttons apply dataGrouping on a series, by default zooming in/out will deselect buttons and unset dataGrouping. Enable this option to keeps buttons selected when extremes change.
buttons: [{
type: 'month',
count: 3,
text: 'Day',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['day', [1]]
]
}
}, {
type: 'year',
count: 1,
text: 'Week',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['week', [1]]
]
}
}, {
type: 'all',
text: 'Month',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['month', [1]]
]
}
}],
Demo: https://jsfiddle.net/BlackLabel/2nm1qtLy/
I implemented the following stockchart with grouped columns:
var seriesData = [];
Highcharts.setOptions({
lang: {
rangeSelectorFrom: "Von",
rangeSelectorTo: "Bis",
months: ["Jannuar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
shortMonths: ["Jan", "Feb", "Mrz", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
rangeSelectorZoom: '',
decimalPoint: "."
}
});
columnChartOptions = {
exporting: {
enabled: false
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
chart: {
type: 'column'
},
credits: {
href: " ",
text: " "
},
title: {
text: ''
},
yAxis: {
min: 0,
title: {
text: 'kWh'
},
lineWidth: 1,
opposite: false
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%B',
week: '%e. %b',
day: '%e. %b',
hour: '%H'
}
},
legend: {
enabled: false
},
tooltip: {
shared: true,
valueDecimals: 2
},
plotOptions: {
series: {
marker: {
enabled: true
}
},
column: {
grouping: false,
shadow: false,
borderWidth: 0,
groupPadding: 0,
color: '#688DC4'
}
},
rangeSelector: {
inputDateFormat: '%d.%m.%Y',
inputEditDateFormat: '%d.%m.%Y',
inputEnabled: true,
inputDateParser: function (value) {
value = value.split(/[\.]/);
return Date.UTC(
value[2],
value[1]-1,
value[0]
);
},
verticalAlign: 'top',
x: 0,
y: 0,
buttonPosition: {
align: 'left',
x: 0,
y: 0
},
buttonTheme: {
width: 50
},
allButtonsEnabled: true,
selected: 3,
buttonSpacing: 5,
buttons: [{
type: 'day',
count: 1,
text: 'Tag',
dataGrouping: {
approximation: "sum",
enabled: true,
forced: true,
units: [['hour', [1]]]
}
}, {
type: 'week',
count: 1,
text: 'Woche',
dataGrouping: {
approximation: "sum",
enabled: true,
forced: true,
units: [['day', [1]]]
}
}, {
type: 'month',
count: 1,
text: 'Monat',
dataGrouping: {
approximation: "sum",
enabled: true,
forced: true,
units: [['week', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Jahr',
dataGrouping: {
approximation: "sum",
enabled: true,
forced: true,
units: [['month', [1]]]
}
}]
},
series: []
};
Initialization of the chart:
myChart = new Highcharts.StockChart('consumptionGraph', columnChartOptions);
myChart.showLoading("Wird geladen...");
setChartData();
Setting seriesdata dynamicaly (actually with an async AJAX call, but for better understanding replaced with static array):
function setChartData() {
var consumerSeries = [
[Date.UTC(2018, 1, 1), 150], [Date.UTC(2018, 1, 11), 180], [Date.UTC(2018, 1, 12), 199],
[Date.UTC(2018, 7, 1), 150], [Date.UTC(2018, 7, 2), 130], [Date.UTC(2018, 7, 5), 280],
[Date.UTC(2018, 9, 1), 150], [Date.UTC(2018, 9, 2), 130], [Date.UTC(2018, 9, 5), 190],
[Date.UTC(2018, 12, 1), 150], [Date.UTC(2018, 12, 2), 130], [Date.UTC(2018, 12, 5), 250],
];
consumerSeriesObject = {
name: "Consumption",
data: consumerSeries,
showInNavigator: true,
color: '#688DC4',
dataGrouping: {
approximation: "sum",
enabled: true,
forced: true,
units: [['month', [1]]]
}
};
myChart.addSeries(consumerSeriesObject, true);
myChart.hideLoading();
}`
JS Fiddle
Now I want to change the color of every column which includes a xAxis value over and equal to 200. (column 2+4 of my Example).
Is there any way to do this?
Yes. update({color: newColor}) won't work for grouped points but you can directly modify their SVGs by calling css method on their graphic property:
chart: {
events: {
render: function() {
this.series[0].groupedData.forEach(function(groupedPoint) {
if (groupedPoint.y > 40) {
groupedPoint.graphic.css({
color: 'red'
});
}
});
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/bhtqoyj9/
render event fires after initial load of the chart (directly after the load event) and after each redraw (directly after the redraw event).
Recently I found my pages with Highstock breaks. When clicking the range selector button, which I had defined the dataGrouping function, the series before grouping is still shown in the chart.
img: the overlapping series
so I went back to find the API reference. It turned out that the example given in the API doc has the same issue with mine:
the jsfiddle of the official example
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
Highcharts.stockChart('container', {
chart: {
height: 300
},
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Day',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Week',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Month',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}],
buttonTheme: {
width: 60
},
selected: 2
},
title: {
text: 'AAPL Stock Price'
},
subtitle: {
text: 'Custom data grouping tied to range selector'
},
_navigator: {
enabled: false
},
series: [{
name: 'AAPL',
data: data,
marker: {
enabled: null, // auto
radius: 3,
lineWidth: 1,
lineColor: '#FFFFFF'
},
tooltip: {
valueDecimals: 2
}
}]
});
});
So I'm wondering if it's a bug with the new updated highstock.js code.
If you group by day only the first series is grouped. How can I make it so it groups both series?
In the above example, both series have the same data, but my current situation consists of two series with the same x value in every point but different y values.
Example: http://jsfiddle.net/6751x0yj/1/
$('#container').highcharts('StockChart', {
rangeSelector : {
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Day',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'year',
count: 1,
text: 'Week',
dataGrouping: {
forced: true,
units: [['week', [1]]]
}
}, {
type: 'all',
text: 'Month',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}],
buttonTheme: {
width: 60
},
selected: 2
},
title : {
text : 'AAPL Stock Price'
},
subtitle: {
text: 'Custom data grouping tied to range selector'
},
series : [{
name : 'Series 1',
data : data,
marker: {
enabled: null, // auto
radius: 3,
lineWidth: 1,
lineColor: '#FFFFFF'
},
tooltip: {
valueDecimals: 2
}
},{
name : 'Series 2',
data : data,
marker: {
enabled: null, // auto
radius: 3,
lineWidth: 1,
lineColor: '#FFFFFF'
},
tooltip: {
valueDecimals: 2
}
}]
});
Thanks!
Looks like a bug, which you already reported here.
Workaround is to update series in descending order:
var H = Highcharts;
H.wrap(H.Axis.prototype, "setDataGrouping", function (p, dg, r) {
if (!dg) {
dg = {
forced: false,
units: null
};
}
if (this instanceof H.Axis) {
for(var i = this.series.length - 1; i >= 0; i--) {
this.series[i].update({
dataGrouping: dg
}, false);
};
}
p.call(this, dg, r);
});
And demo: http://jsfiddle.net/6751x0yj/2/
I tried to make a line chart with highstock but I got a problem with aligning points with ticks on X-axis.
Here are some of my code snippets for the chart.
jQuery('#chart-area').highcharts('StockChart', {
xAxis: {
minRange: 7 * 24 * 3600000,
minTickInterval: 24 * 3600000
},
rangeSelector: {
inputEnabled: true,
selected: 1,
buttons: [
{
type: 'week',
count: 1,
text: '1w'
},
{
type: 'week',
count: 2,
text: '2w'
},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'month',
count: 2,
text: '2m'
},
{
type: 'month',
count: 3,
text: '3m'
},
{
type: 'month',
count: 6,
text: '6m'
}
]
},
title: {
text: 'Test Execution Trend'
},
subtitle: {
text: $scope.currentStream
},
series: [
{
name: 'Test Success Percentage',
pointInterval: 24 * 3600 * 1000,
data: $scope.data,
marker: {
enabled: true,
radius: 3
},
shadow: true,
tooltip: {
valueDecimals: 0
}
}
]
}
);
});
}
I don't even know why this could happen. Is there any problems in my codes?
Here is jsfiddle
http://jsfiddle.net/U85D6/
The problem is that your data isn't starting at specific day, but it's about 16:00. Highcharts ticks are placed at 00:00. That example should explain you better: http://jsfiddle.net/U85D6/1/
I have addeed
tooltip: {
xDateFormat: '%A, %b %e, %H:%M'
},
to show full date for points.