Highstock dataGrouping option - highcharts

I have gone through the highstock datagrouping documenation(https://api.highcharts.com/highstock/series.column.dataGrouping), But little unclear about this data grouping option, Things I have noticed is, Data grouping is enabled by default in highstock, I n which we can force the datagrouping by giving custom datagrouping option through units option in datagrouping, The doubt I got is which is the default data grouping(default unit option) in highstock, another one is do we need to tell the datagrouping units for each time interval by which we are gonna show in chart(eg, if the datarange chosen is one month the grouping should by 1 day, If the daterange chosen is one day means the datagrouping units should be by hour),
units: [[
'millisecond', // unit name
[1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
], [
'second',
[1, 2, 5, 10, 15, 30]
], [
'minute',
[1, 2, 5, 10, 15, 30]
], [
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
null
]]
Do we need to specify each unit or do we need to change the units dynamically based on the daterange chosen?
This is what I have done, The based on the daterange the user chosen the grouping units should be changed, Do we need to specify the units based on the daterange chosen and what the units array specifies (Is Giving only one unit as option to the grouping is the functionality, Or the units array options can be chosen based on the timestamps)
Highcharts.stockChart('chart', {
chart: {
zoomType: false
},
legend: {
enabled: true
align: 'right',
verticalAlign: 'top',
x: 0,
y: -20
},
navigator: {
enabled: false
},
rangeSelector: {
enabled: false
},
scrollbar: {
enabled: false
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day:"%b %e"
}
},
yAxis: {
opposite : false
},
series: [{
data: data ,
marker: {
enabled: true
},
dataGrouping: {
forced: true,
approximation: "sum"
}
}]
EDIT
While forced option is set to false

which is the default data grouping(default unit option) in highstock
There's a little flaw in the API (https://api.highcharts.com/highstock/series.column.dataGrouping.units) in units section. First it says that it defaults to:
units: [[
'millisecond', // unit name
[1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
], [
'second',
[1, 2, 5, 10, 15, 30]
], [
'minute',
[1, 2, 5, 10, 15, 30]
], [
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
null
]]
and after that "Defaults to undefined." line appears. The first one is correct.
Highcharts automatically finds the best grouping unit from units array. So, in other words: units specifies which groupings can be applied if Highcharts decides that applying data grouping is a good idea.
Enable dataGrouping.forced and use only one key-value pair in units array if you want to make sure that this grouping will be used no matter what e.g.:
units: [[
'hour',
[3]
] // Data will always be grouped into 3 hours periods
These're just general rules - they should be enough to use data grouping successfully.

Related

cannot use strings in data in highcharts on doughnut charts

Why can't I use strings in data on a highchart doughnut chart? You can use it on Bar charts but not doughnut for some reason?
Example of strings in data for bar chart (no errors):
Fiddle: http://jsfiddle.net/8rsywuc7/
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: ['','','','','']
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
Example of strings in data for doughnut chart (see error):
Fiddle: http://jsfiddle.net/troqjcnz/
"data": [38, 44, 14, 20, 25, 75],
"name": "Male",
},
{
"data": ['','','','','',''],
"name": "Female",
},
{
"data": [38, 44, 14, 20, 25, 75],
"name": "No reply",
}
Notice that there is a big difference between those two series configs. In the first one, the data is an array of empty string, meanwhile in the second data becomes an array of objects where y is set to empty string. If you will do the same in the column, the same error will occur - see: http://jsfiddle.net/8rsywuc7/
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [{
name: 'test',
y: ''
}]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
What can I suggest is:
use null rather than empty strings (I am aware that it is not the same, but the output should be similar), demo: http://jsfiddle.net/BlackLabel/jokbgryz/
change the logic responsible for creating data for something like is done here: http://jsfiddle.net/BlackLabel/9bov21gf/

Highcharts dual yaxis scaling issue

I have a chart with two yaxis but can't get the second data series to scale to the second axis. What am I missing?
Example: https://jsfiddle.net/32yugp6m/2/
Now I see where the problem is. You have set the series.yaxis to 1 and 2, meanwhile, it needs to be set as series.yAxis 0 and 1. Notice that Axis must be started with capital letter.
Demo: https://jsfiddle.net/BlackLabel/8u2rhegv/
series: [{
name: 'Deg F.',
type: 'line',
yAxis: 0,
data: [
[Date.UTC(2020, 1, 22, 12, 2), 70.8],
[Date.UTC(2020, 1, 22, 12, 1), 70.8],
...
],
},
{
name: 'RH',
type: 'line',
yAxis: 1,
data: [
[Date.UTC(2020, 1, 22, 12, 2), 33.4],
[Date.UTC(2020, 1, 22, 12, 1), 33.4],
...
],
}
]
API: https://api.highcharts.com/highcharts/series.line.yAxis

Not showing x-axis label in lower configuration

I am using highcharts graphs, Start point of highcharts is showing in my laptop (maximum resolution: 1920*1080).
But when I am an open same graph in a lower system: maximum resolution (1368*768) That time the first point of x-axis not showing
Note : Given image is not match with data but graph is same.
CODE :
$('#call_cc_graph_data').highcharts({
chart: {
type: 'spline',
zoomType: 'x'
},
title: {
text: 'CPS vs Time'
},
xAxis: {
type: 'datetime',
min : 1533873600000,
max : 1533945599000,
},
series:[{
name: 'CC',
data: [[1533876120000,1],[1533876240000,1],[1533876840000,2],[1533876900000,1],[1533877200000,7],[1533877260000,4],[1533877320000,1]]
}]
});
Expected result of image : It needs to show value 05:00 on starting point of x-axis.
Try with xAxis.startOnTick Doc and maybe xAxis.tickInterval Doc
xAxis: {
type: 'datetime',
min : 1533873600000,
max : 1533945599000,
startOnTick:true,
tickInterval:3600 * 1000 // If 2 hours step is too large
},
Fiddle
You can change default xAxis units option:
xAxis: {
type: 'datetime',
units: [
[
'second', [20, 40]
],
[
'minute', [1, 2, 5, 10, 15, 30]
],
[
'hour', [1, 2, 3, 5, 6, 8, 12]
],
[
'day', [1, 2]
],
[
'week', [1, 2]
],
[
'month', [1, 2, 3, 4, 6]
],
[
'year',
null
]
],
min: 1533876120000,
max: 1533945599000
},
Live demo: http://jsfiddle.net/BlackLabel/pskqo6ad/
API: https://api.highcharts.com/highcharts/xAxis.units
Similar problem: https://github.com/highcharts/highcharts/issues/5437

In Highcharts, shared tooltips ruin crosshairs on the Y axis

I have this issue, where I want a shared and custom-formatted tooltip on a Highcharts chart, but at the same time I want the crosshairs to work.
There is no issue on the x axis, but the on the y, it does not follow the pointer.
Any suggestions?
Highcharts.chart('container', {
chart: {
type: 'line'
},
xAxis: {
crosshair: true
},
yAxis: {
crosshair: true
},
series: [
{
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
{
data: [1, 2, 3, 4, 5, 6, 7, 8, 9].reverse()
}
],
tooltip: {
shared: true
}
});
1st JSFiddle example
UPDATE:
Based on the comments given under this post, I've updated the issue.
Now, I have some compromise: I have two crosshairs on the y axis (or, exactly as many as many series item I have...)
The issue is, that if I link the axis options to the 0th option, the scale will be wrong. If I don't (and I don't have an example for that, but you can delete the line and run again), the two series will be at different scales, but since the second option is hidden, the whole think is just a mess.
And if I don't link the options to the 0th item, the crosshairs will not work again...
Any idea for this?
Highcharts.chart('container', {
chart: {
type: 'line'
},
xAxis: {
crosshair: true
},
yAxis: [
{
crosshair: true
},
{
linkedTo: 0, // delete me and run again
crosshair: true,
visible: false
}
],
series: [
{
yAxis: 0,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
{
yAxis: 1,
data: [1, 2, 3, 4, 5, 6, 7, 8, 9].reverse().map(value => value - 5)
}
],
tooltip: {
shared: true
}
});
2nd JSFiddle example
If I am thinking correctly,your worry is about the negative value.So for the negative value you can assign min value to yAxis in charts
check Fiddle demo
yAxis: [
{
crosshair: true,
min:-10,
},
{
linkedTo: 0, // delete me and run again
crosshair: true,
visible: false
}
],

highcharts tick position incorrect when categories specified

please take a look at this graph which displays as expected (i.e. ticks are at the specified positions):
http://jsfiddle.net/a3ZrC/3/
xAxis: {
tickPositions: [1, 3, 4, 5, 10],
gridLineWidth: '1',
lineWidth: 1
//tickPosition: 'outside'
},
Now, if I specify categories, the tick positions (and grid) change, they are no longer on the label, see:
http://jsfiddle.net/a3ZrC/4/
xAxis: {
tickPositions: [1, 3, 4, 5, 10],
categories: ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve'],
gridLineWidth: '1',
lineWidth: 1
//tickPosition: 'outside'
},
Is this a bug or am I missing something?
Cheers,
Tony.
Guess you missed a trick here. You can specify the tickmarkPlacement option .
It defaults to between. Specify it as on to get the results as you desired.
xAxis: {
tickPositions: [1, 3, 4, 5, 10],
categories: ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve'],
gridLineWidth: '1',
lineWidth: 1,
tickmarkPlacement: 'on'
},
Fiddled version.
Hope this helps.

Resources