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/
Related
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?
I am not able to set the color in tree map based on a value. value is coming dynamically from api response. Here is how I am trying to achieve same but id is not working. It is a drilldown tree map.if anyone can help me. I want to set the colors as per the colorvalue.
function treeMap(containerID, jsonData, titleText, subTitleText, type, colorValue) {
Highcharts.AST.allowedAttributes.push('onmousedown')
treeChart = Highcharts.chart(containerID, {
colorAxis: {
minColor: Highcharts.getOptions().colors[9],
maxColor: '#FFFFFF',
},
plotOptions: {
series: {
turboThreshold: 10000
}
},
series: [{
type: "treemap",
allowDrillToNode: true,
layoutAlgorithm: 'squarified',
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3
}],
name: titleText,
data: jsonData[0].concat(jsonData[1]),
colorKey:colorValue
}],
tooltip: {
useHTML: true,
style: {
pointerEvents: 'auto'
},
stickOnContact: true,
pointFormatter: function() {
return chartToolTip(this, type);
}
},
title: {
text: titleText
},
subtitle: {
text: subTitleText
}
});
}
As API says, series.colorKey is a string that determinates what data value should be used to calculate point color. Whereas colorValue should be passed with data. I hope the following, simplified example will clarify it:
Example code:
let colorValue = [1, 5, 10];
Highcharts.chart('container', {
colorAxis: {
minColor: '#FFF000',
maxColor: '#0000FF'
},
series: [{
type: 'treemap',
colorKey: 'colorValue',
data: [{
value: 4,
colorValue: colorValue[0]
}, {
value: 3,
colorValue: colorValue[1]
}, {
value: 2,
colorValue: colorValue[1]
}, {
value: 1,
colorValue: colorValue[2]
}]
}]
});
API Reference:
https://api.highcharts.com/highcharts/plotOptions.treemap.colorKey
Demo:
https://jsfiddle.net/BlackLabel/wa4h0cgk/
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.