Highstock dateTimeLabelFormats doesn't work

Highstock dateTimeLabelFormats doesn't work - javascript

I'm trying to show only the first day of the month in Xaxis, everything is ok when
the series array has more than or equal to five elements:
http://jsfiddle.net/2f6Ne/
data: [
[ Date.UTC(2014, 0, 1), 10.82413772161932 ],
[ Date.UTC(2014, 1, 1), 0.10286926951274679 ],
[ Date.UTC(2014, 2, 1), 0.4359489916094994 ],
[ Date.UTC(2014, 3, 1), 0.4359489916094994 ],
[ Date.UTC(2014, 4, 1), 0.4359489916094994 ]
]
But when the series are fewer than five elements the dateTimeLabelFormats option doesn't work:
http://jsfiddle.net/XtFnx/
data: [
[ Date.UTC(2014, 0, 1), 10.82413772161932 ],
[ Date.UTC(2014, 1, 1), 0.10286926951274679 ],
[ Date.UTC(2014, 2, 1), 0.4359489916094994 ],
[ Date.UTC(2014, 3, 1), 0.4359489916094994 ]
]
Any ideas?

While I"m not sure what you are asking, but have I vaguely guessed that you want to show first of each month on x-axis. If yes, you can use tickPositioner.
tickPositioner: function() {
var ticks = [
Date.UTC(2014, 0, 1),
Date.UTC(2014, 1, 1),
Date.UTC(2014, 2, 1),
Date.UTC(2014, 3, 1)];
//dates.info defines what to show in labels
//apparently dateTimeLabelFormats is always ignored when specifying tickPosistioner
ticks.info = {
//unitName: "month",
unitName: "day",
higherRanks: {} // Omitting this would break things
};
return ticks;
}
http://jsfiddle.net/2f6Ne/2/
http://jsfiddle.net/XtFnx/3/

It works as expected: you have changed month/year options, but all others (day, hour etc.) are used as defaults. dateTimeLabelFormats doesn't prevent from displaying different interval on xAxis. To change that use minTickInterval.

Related

Highcharts x-range series: difficulty removing numerical labels on y-axis

This is a question for anyone with HighchartsJS experience
I’m currently having an issue displaying state data using the Highcharts X-range series charts. Specifically, My problem is that our data that we are using to represent each individual state are both fairly high and non consecutive (768, 769 and 773). To label these individual states I’m using a sparse array and placing my labels at the corresponding indices.
The problem I am trying to solve which is depicted by this jsfiddle: https://jsfiddle.net/sn4d2hvq/10/
let categoryArray = [];
categoryArray[768] = 'one';
categoryArray[769] = 'two';
categoryArray[773] = 'three';
Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: 'Example'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: categoryArray,
},
series: [{
name: 'dataset 1',
borderColor: 'gray',
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 768,
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 769
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 773
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 769
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 773
}],
dataLabels: {
enabled: true
}
}]
});
is that I want to exclude all values (which in this case means all numerical values) on the y-axis such that there are no numbers from zero up until the first index as well as no numbers in between any of the labels (ie. 770, 771,772). Here’s an example of the desired view:
https://jsfiddle.net/estgbr6j/2/
let categoryArray = ['one', 'two', 'three'];
Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: 'Example'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: categoryArray,
},
plotOptions: {
xrange: {
colorByPoint: false,
}
},
series: [{
name: 'dataset 1',
borderColor: 'gray',
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}],
dataLabels: {
enabled: true
}
}]
});
The only way I’ve been able to consistently achieve the desired result (as depicted by the second example) has been to map the values from [768, 769, 773] => [0, 1, 2] and use a dense array to label the newly mapped values. It seems that this workaround shouldn’t be necessary but I have yet to find an option in the highcharts API to easily allow for our desired result without mapping the values. It should also be noted that in our actual data set, we are usually displaying multiple series with each series depicted by its own color rather than each category (which I have been able to achieve). I would like to know which API option or options are available to display our desired result. Thank you so much.
highcharts: 9.0.1
highcharts-angular: 2.10.0
angular: 12.0.5
node: 14.18.0

The solution with mapping your data is really good. The intervals must be regular if you want to have equally distributed points.
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}]
You can use tickPositions property, but labels will not be equally distributed. Example: https://jsfiddle.net/BlackLabel/gbwhk5nx/
API Reference: https://api.highcharts.com/highcharts/yAxis.tickPositions

mateusz.b on the official Highcharts forum had a great answer to this. He suggested using a columnrange series instead of an xrange series to present the data.
Check out the post here:
https://www.highcharts.com/forum/viewtopic.php?f=9&t=47822

Highcharts datetime line travels backwards with unsorted data

I know I should have sorted data, but I'm getting it from different API calls and there are 10 other reasons why I cannot have sorted data.
I have some unsorted data, that I need to plot in a timeseries graph.
{
xAxis: {
type: 'datetime'
},
series: [{
data: [
[Date.UTC(2020, 0, 1), 29.9],
[Date.UTC(2020, 0, 2), 71.5],
[Date.UTC(2020, 0, 6), 106.4],
[Date.UTC(2020, 0, 3), 129.2],
[Date.UTC(2020, 0, 5), 144.0],
[Date.UTC(2020, 0, 8), 176.0]
]
}]
}
When I use the above options for highcharts, the line travels backwards
Is there a way I can make highcharts do the required sorting, and plot the chart correctly?
I have tried dataSorting option as well, but it didn't work.
Highcharts has a dataSorting flag to sort the data, so its not completely crazy of me to expect it.

Are you missing the dataSorting property?
{
xAxis: {
type: 'datetime'
},
series: [{
dataSorting: {
enabled: true,
sortKey: 'value'
},
data: [
[Date.UTC(2020, 0, 1), 29.9],
[Date.UTC(2020, 0, 2), 71.5],
[Date.UTC(2020, 0, 6), 106.4],
[Date.UTC(2020, 0, 3), 129.2],
[Date.UTC(2020, 0, 5), 144.0],
[Date.UTC(2020, 0, 8), 176.0]
]
}]
}

Highcharts requires sorted data in ascending X order. You need to pre-sorts the data, for example:
var data = [
[Date.UTC(2020, 0, 1), 29.9],
[Date.UTC(2020, 0, 2), 71.5],
[Date.UTC(2020, 0, 6), 106.4],
[Date.UTC(2020, 0, 3), 129.2],
[Date.UTC(2020, 0, 5), 144.0],
[Date.UTC(2020, 0, 8), 176.0]
];
data.sort((a, b) => a[0] - b[0]);
Highcharts.chart('container', {
...,
series: [{
data
}]
});
Live demo: http://jsfiddle.net/BlackLabel/cf8tq6a2/

How to show time values in stacked column using High stock

I am trying to created stacked columns in Highstock. in following js fiddle.
The code is
//http://jsfiddle.net/nishants/y0t130f3/2/
$(function () {
$('#container').highcharts('StockChart',{
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: [new Date(2014, 5, 30).getTime()/1000,new Date(2014, 5, 29).getTime()/1000,new Date(2014, 5, 28).getTime()/1000,new Date(2014, 5, 27).getTime()/1000,new Date(2014, 5, 26).getTime()/1000,new Date(2014, 5, 25).getTime()/1000,new Date(2014, 5, 24).getTime()/1000,new Date(2014, 5, 23).getTime()/1000,new Date(2014, 5, 22).getTime()/1000,new Date(2014, 5, 21).getTime()/1000,new Date(2014, 5, 20).getTime()/1000,new Date(2014, 5, 19).getTime()/1000,new Date(2014, 5, 18).getTime()/1000,new Date(2014, 5, 17).getTime()/1000,new Date(2014, 5, 16).getTime()/1000,new Date(2014, 5, 15).getTime()/1000,new Date(2014, 5, 14).getTime()/1000,new Date(2014, 5, 13).getTime()/1000,new Date(2014, 5, 12).getTime()/1000,new Date(2014, 5, 11).getTime()/1000 ]
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '' + this.x + '' +
this.series.name + ': ' + this.y + '' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2,5, 3, 4, 7, 2,5, 3, 4, 7, 2,5, 3, 4, 7, 2,]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1,2, 2, 3, 2, 1,2, 2, 3, 2, 1,2, 2, 3, 2, 1,]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5,3, 4, 4, 2, 5,3, 4, 4, 2, 5,3, 4, 4, 2, 5,]
}]
});
});
The code on x axis should be dates from 11/05/2014 to 30/05/2014 . I tried all new Date
unix time stamp and unix time stamp /1000. but nothing works. What I want to achieve is
very straight forward => How to put the dates on x axis of highstock.

Unlike HighCharts, I don't think HighStock support the xAxis.categories config.
However, you could specify the dates directly in serie.data like this:
{
name: 'John',
data: [
[new Date(2014, 5, 11).getTime(), 5],
[new Date(2014, 5, 12).getTime(), 3],
[new Date(2014, 5, 13).getTime(), 4],
...
]
}
And the dates must be in ascending order, otherwise the chart will be broken.
Another thing is you might want to set this to make columns align with date labels correctly.
plotOptions: {
column: {
...
dataGrouping: {
enabled: true,
forced: true,
units: [
['day', [1]]
]
}
}
},
Example JSFiddle: http://jsfiddle.net/1xLny72q/2/
Hope this helps.

When we make Highstock graph by series then we can't pass x-axis seprated data as per like Highchart
like in your code
xAxis: {
categories: [new Date(2014, 5, 30).getTime()/1000,new Date(2014, 5, 29).getTime()/1000,new Date(2014, 5, 28).getTime()/1000,new Date(2014, 5, 27).getTime()/1000,new Date(2014, 5, 26).getTime()/1000,new Date(2014, 5, 25).getTime()/1000,new Date(2014, 5, 24).getTime()/1000,new Date(2014, 5, 23).getTime()/1000,new Date(2014, 5, 22).getTime()/1000,new Date(2014, 5, 21).getTime()/1000,new Date(2014, 5, 20).getTime()/1000,new Date(2014, 5, 19).getTime()/1000,new Date(2014, 5, 18).getTime()/1000,new Date(2014, 5, 17).getTime()/1000,new Date(2014, 5, 16).getTime()/1000,new Date(2014, 5, 15).getTime()/1000,new Date(2014, 5, 14).getTime()/1000,new Date(2014, 5, 13).getTime()/1000,new Date(2014, 5, 12).getTime()/1000,new Date(2014, 5, 11).getTime()/1000 ]
},
its not work in HighStock
for this you need to pass these each separate value on each series like below
{
name: 'John',
data: [
[new Date(2014, 5, 11).getTime(), 5],
[new Date(2014, 5, 12).getTime(), 3],
...
]
},name: 'Jane',
data: [
[new Date(2014, 5, 11).getTime(), 2],
[new Date(2014, 5, 12).getTime(), 3],
...
])
}, {
name: 'Joe',
data: [
[new Date(2014, 5, 11).getTime(), 5],
[new Date(2014, 5, 12).getTime(), 4],
...
]}
and as per #ranTarm dates must be in ascending order and dataGrouping as mention in his comment

Highcharts spline and columnrange inverted

I have chart that has both splines and a columnrange which ideally would be inverted so the bars run horizontal and the xAxis values will be on the y axis.
See current code at jsfiddle.
Relevant part of code:
$(function () {
$('#container').highcharts({
chart: {
//type: 'spline'
//inverted: true,
},
credits: {
enabled: false
},
title: {
text: 'Polygon Graph: 109470 - North Penrith'
},
xAxis: [{
type: 'datetime',
}, {
type: 'category',
categories: ['Planning', 'Bulk Earthworks', 'DA Design', 'CC Design']
}],
yAxis: [{
opposite: true,
labels: {
format: '${value:,.0f}'
},
title: {
text: 'Value ($)'
},
min: 0
}, {
type: 'datetime',
}],
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
var d = new Date(this.y);
return d.getDate();
}
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %b %y', this.x) + ': ' + ' $' + this.y;
}
},
series: [{
name: 'Expected Costs',
data: [
[Date.UTC(2013, 9, 29), 145000],
[Date.UTC(2013, 10, 6), 140000],
[Date.UTC(2013, 10, 13), 133000],
[Date.UTC(2013, 10, 20), 125000],
[Date.UTC(2013, 10, 27), 116000],
[Date.UTC(2013, 11, 3), 106000],
[Date.UTC(2013, 11, 10), 101000],
[Date.UTC(2013, 11, 17), 96000],
[Date.UTC(2013, 11, 24), 94000],
[Date.UTC(2013, 12, 1), 82000],
[Date.UTC(2013, 12, 8), 70000],
[Date.UTC(2013, 12, 15), 58000],
[Date.UTC(2013, 12, 22), 33000],
[Date.UTC(2013, 12, 29), 8000],
],
color: 'red'
}, {
name: 'Actual Costs',
data: [
[Date.UTC(2013, 9, 29), 135000],
[Date.UTC(2013, 10, 6), 133000],
[Date.UTC(2013, 10, 13), 125000],
[Date.UTC(2013, 10, 20), 116000],
[Date.UTC(2013, 10, 27), 104000],
[Date.UTC(2013, 11, 3), 89000],
[Date.UTC(2013, 11, 10), 84000],
[Date.UTC(2013, 11, 17), 78000],
//[Date.UTC(2013,11,24),75000 ],
// [Date.UTC(2013,12,1),64000 ],
// [Date.UTC(2013,12,8),59000 ],
// [Date.UTC(2013,12,15),50000 ],
// [Date.UTC(2013,12,22),25000 ],
// [Date.UTC(2013,12,29),0 ]
],
color: 'green'
}, {
name: 'Projected Costs',
data: [
//[Date.UTC(2013,9,29),135000 ],
// [Date.UTC(2013,10,6),133000 ],
// [Date.UTC(2013,10,13),125000 ],
// [Date.UTC(2013,10,20),116000 ],
// [Date.UTC(2013,10,27),104000 ],
// [Date.UTC(2013,11,3),89000 ],
// [Date.UTC(2013,11,10),84000 ],
[Date.UTC(2013, 11, 17), 78000],
[Date.UTC(2013, 11, 24), 75000],
[Date.UTC(2013, 12, 1), 64000],
[Date.UTC(2013, 12, 8), 59000],
[Date.UTC(2013, 12, 15), 50000],
[Date.UTC(2013, 12, 22), 25000],
[Date.UTC(2013, 12, 29), 0]
],
dashStyle: 'longdash'
}, {
name: 'Gantt',
type: 'columnrange',
//inverted: true,
xAxis: 1,
yAxis: 1,
data: [
[Date.UTC(2013, 9, 29), Date.UTC(2013, 9, 30)],
[Date.UTC(2013, 9, 30), Date.UTC(2013, 10, 17)],
[Date.UTC(2013, 10, 18), Date.UTC(2013, 10, 30)],
[Date.UTC(2013, 10, 30), Date.UTC(2013, 11, 17)]
],
}]
});
I have tried starting from a columnrange chart and building it from there, however that results in the spline values graphing from smallest to largest (even with a reverse option). This meant it seemed like a better idea to add the columnrange to the spline base.
I'm stuck it seems like highcharts should be able to do this.
How do I get the columnrange to be horizontal while still maintaining the rest of the layout of the graph?

Unfortunatley when you use inverted options then axis are flipped and all series are inverted. It is default behaviour. You cannot combine inverted and not inverted series.

Highcharts columns have no width (seemingly arbitrarily)

I'm working with a column chart using Highcharts. The chart needs to handle an arbitrary number of columns.
Here's an example of one such chart that I need to handle:
$('#TimesChart2').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Response Times'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'Minutes'
}
},
series: [{
name: 'Average Response Time',
data: [[Date.UTC(2013, 6, 30), 878.42], [Date.UTC(2013, 6, 31), 579.68], [Date.UTC(2013, 7, 1), 400.42], [Date.UTC(2013, 7, 2), 622.95], [Date.UTC(2013, 7, 5), 1260.97], [Date.UTC(2013, 7, 3), 0], [Date.UTC(2013, 7, 4), 0], [Date.UTC(2013, 7, 6), 517.945] ],
dataGrouping: {
enabled: false
},
pointPadding: .05
}],
});
The problem is that the columns have an extremely small width on this set of data. In some datasets (see the first graph in the jsfiddle link), the columns have normal width and are fine.
One possible workaround is to set the pointWidth to a fixed value, but then on large graphs the columns overlap. I've tried experimenting with pointPadding and grouping as well, to no avail.
http://jsfiddle.net/3NZZW/
Anyone know what's happening here?

That's really odd. But, you're first data series is in reverse date order. If you fix that, the chart is right.
http://jsfiddle.net/pUTQd/
series: [{
name: 'Average Response Time',
data: [[Date.UTC(2013, 7, 2), 354.5], [Date.UTC(2013, 7, 3), 1981.875], [Date.UTC(2013, 7, 4), 434.5], [Date.UTC(2013, 7, 5), 678.1], [Date.UTC(2013, 7, 6), 87.465] ],
dataGrouping: {
enabled: false
},
pointPadding: .05
}],
(note I just changed the dates, I didn't change the data)

Develop Reference

JavaScript is the programming language of the Web.

Highstock dateTimeLabelFormats doesn't work - javascript

It works as expected: you have changed month/year options, but all others (day, hour etc.) are used as defaults. dateTimeLabelFormats doesn't prevent from displaying different interval on xAxis. To change that use minTickInterval.

Related

Highcharts x-range series: difficulty removing numerical labels on y-axis

Highcharts datetime line travels backwards with unsorted data

How to show time values in stacked column using High stock

Highcharts spline and columnrange inverted

Highcharts columns have no width (seemingly arbitrarily)

Categories

Resources