For me, dateTimeLabelFormats showing inconsistent date-format based on the time selection.
Below is the URL
http://jsfiddle.net/46bk7pvm/2/
In above URL, when I select 6 month it is reflecting with proper date format. Which is '%Y-%m'. But when I select 1 Month or 3 Months it is reflecting with day: '%Y<br/>%m-%d', format. But it should be Month format which is month: '%Y-%m'.
In short for month selection it should be
month: '%Y-%m',
for day selection it should be
day: '%Y<br/>%m-%d',
and for year it should be
year: '%Y'
Here is the code block
Highcharts.stockChart('container', {
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
How can we set above dateformat dynamically based on the time period selection.?
dateTimeLabelFormats defines format for xAxis ticks according to the distance between closest of them. When you click 1M, then you have only four weeks of data so if there will be room only for four dataLabels then week format will be applied. If you have more space (wider chart) then day format will be used etc.
What you want is probably to change format on labels after button click: http://jsfiddle.net/BlackLabel/wxpfc2k5/
Snippet (only 1M button!):
rangeSelector: {
selected: 1,
buttons: [{
type: 'month',
count: 1,
text: '1m',
events: {
click: function() {
chart.xAxis[0].update({
labels: {
format: '{value:%Y-%m}' // change format on click
}
});
}
}
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}]
}
More about label formatting can be found in the API and docs.
Thanks, Paweł Fus for your suggestion on formatter.
I solved my problem by assigning date-format to formatter. Here is the code.
labels: {
overflow: false,
align: "center",
style: _xaxis_label_style,
step: _step,
staggerLines: _staggerLines,
x: 0,
enabled: true,
useHTML: term_useHTML,
formatter: function () {
if ($j(".hdnSelection").val() == "today") {
return Highcharts.dateFormat(dateformatlable.hour, this.value);
}
else {
var key = "1month"; //default case
if (typeof $j('.hdnSelectionmonth') !== "undefined" && $j('.hdnSelectionmonth').val() != '') {
key = $j('.hdnSelectionmonth').val();
}
var duration = key.substring(1);
switch (duration.toLowerCase()) {
case "day":
return Highcharts.dateFormat(dateformatlable.day, this.value);
case "week":
return Highcharts.dateFormat(dateformatlable.week, this.value);
case "month":
return Highcharts.dateFormat(dateformatlable.month, this.value);
case "year":
return Highcharts.dateFormat(dateformatlable.year, this.value);
break;
case "ytd":
return Highcharts.dateFormat(dateformatlable.year, this.value);
default:
return Highcharts.dateFormat(dateformatlable.day, this.value);
}
}
}
},
showLastLabel: true
You can get selected unitName from tickPositionInfo and apply it in the label formatter:
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
const format = {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
}[this.tickPositionInfo.unitName];
return Highcharts.dateFormat(format, this.value);
}
}
}
Related
How can I change the format of the "upper" xAxis Label as shown in the picture?
I have already figured out how to change the weekday labels below (T, W, T, etc.) with the following snippet (for weeks, code placed within the xAxis):
dateTimeLabelFormats: {
week: {
list: ['Kalenderwoche %W', 'KW%W']
}
},
Existing example to play around:
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/gantt/demo/resource-management
You have 2 xAxis. So you should provide dateTimeLabelFormats array.
axis with the lower index will be placed lower.
So, your xAxis should be
xAxis: [{
currentDateIndicator: true,
dateTimeLabelFormats: {
day: {
list: ['%A, %e. %B', '%a, %e. %b', '%E']
}
}
},
{
dateTimeLabelFormats: {
week: {
list: ['Kalenderwoche %W', 'KW%W']
},
month: {
list: ['Monat%W', 'KW%W']
}
}
}
],
According to this page, the way to do it is to set the x-axis to be an array of objects, with each representing a level of the x-axis (day, week, month, etc.). In this case: https://jsfiddle.net/vm5t78j3/
xAxis: [{
currentDateIndicator: true,
}, {
labels: {
format: '{value:%W}'
},
}],
I'm attempting to create a highchart populated by dynamic data that looks something similar to the following image:
Where the y-axis (technically just the x-axis with the inverted: true tag) is a list of people grouped by location. However, I'm having trouble displaying the data grouped by their locations with the locations being displayed also. The actual view isn't important, just that it neatly groups the data and displays the location.
All I've managed to do so far is simply sort the data and tag the location name to the end of the person, but that's not quite what I want:
I'm aware that this is a relatively easy thing to do with categories and data series, but the only examples of this i could find didn't involve dynamic data. Here is some of my code so far:
function loadChart() {
//calculate height based on number of users displayed, and width based on the panel body width
var chartHeight = users.length * 20 + 75;
var chartWidth = $('#InOutPanelViewId').width();
chart = Highcharts.chart('ChartViewId', {
chart: {
width: chartWidth,
height: chartHeight,
type: 'columnrange',
inverted: true,
spacingLeft: 0
},
title: {
text: null
},
xAxis: {
showEmpty: false,
title: null,
type: 'category',
labels: {
align: 'right',
format: '{value.User}',
style: {
color: 'black',
fontSize: '12pt'
}
}
},
yAxis: {
showEmpty: false,
title: '',
type: 'datetime',
dateTimeLabelFormats: {
second: '%I:%M %P',
minute: '%I:%M %P',
hour: '%I:%M %P',
day: '%I:%M %P',
week: '%I:%M %P',
month: '%I:%M %P',
year: '%I:%M %P'
},
min: startTime.valueOf(),
max: endTime.valueOf(),
plotLines: [{
color: 'grey',
value: time,
width: 1.5
}]
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [
{ name: "Data", borderWidth: 0, data: chartData }
],
tooltip: {
formatter: function () {
return '<b>' + this.point.jobcode + '</b><br>' + this.point.timespan + '<br>';
}
}
});
}
Where chartData currently looks like this:
chartData[chartData.length] = { name: user, low: displayStart.valueOf(), high: displayEnd.valueOf(), timespan: timeSpan, jobcode: value.JobCodeName, color: colour };
And is populated with dynamic data it pulls from an endpoint. The endpoint does also send back the location, so I'm wondering how I can use this structure and the location i'm sending back to group the data and display it nicely.
Any help is appreciated, thanks!
I am trying to display dateTime in day/weekly/month format on the x axis of high charts I have the data formatted as x utc date time format and y (magnitude). I was under the impression I only need to do this for it to work
Highcharts.chart('container', {
title: {
text: 'Chart with time'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: "%e. %b",
month: "%b '%y",
year: "%Y"
}
},
series: [{
data: [
[1493326164493, 100],
[1493326194018, 120]
]
}]
});
What am I doing wrong? I have posted a fiddle link below for my scenario
https://jsfiddle.net/dLfv2sbd/
axis.dateTimeLabelFormats works a little bit different. In the first place, Highcharts tries to guess what is 'the best unit' of your data and, e.g. if it is a day, it will format it according to day property from dateTimeLabelFormats.
If you want to just format axis labels, you can use axis.labels.format and specify a format like this:
xAxis: {
type: 'datetime',
labels: {
format: '{value:%Y-%b-%e}'
},
example: https://jsfiddle.net/dLfv2sbd/1/
You can try format date with
xAxis: {
labels: {
formatter: function(){
return moment(new Date(this.value)).format('DD'); // example for moment.js date library
//return this.value;
},
},
Also you can check documentation http://api.highcharts.com/highcharts/xAxis.labels.formatter
You can try this also -
{value:%Y-%b-%e %l:%M %p }
labels: {
format: '{value:%Y-%b-%e %l:%M %p }'
},
Output- 2017-Apr-27 8:49 PM
format: '{value:%Y-%b-%e %l:%M}'
labels: {
format: '{value:%Y-%b-%e %l:%M %p }'
},
Output- 2017-Apr-27 8:49
format: '{value:%Y-%b-%e}'
labels: {
format: '{value:%Y-%b-%e}'
},
Output - 2017-Apr-27
format: '{value:%Y-%b-%e %H:%M}'
labels: {
format: '{value:%Y-%b-%e %H:%M}'
},
output 2017-Apr-27 20:49
Simple year-month-day format:
format: '{value:%Y-%m-%e}'
It's the first time I use Highcharts and there is something missing, I'm sure.
I'm trying to translate its calendar months but it seems it doesn't work although everywhere I read this should be the best way.
Highcharts.setOptions({
lang: {
months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
}
});
var reviewAvgContainer = $('#reviewAvgcontainer');
reviewAvgContainer.highcharts({
credits : {
enabled: false
},
data: {
table: 'reviewAvgData'
},
chart: {
type: 'line'
},
title: {
text: reviewAvgContainer.data('title')
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%B'
}
},
yAxis: {
min : 0,
max: 10,
allowDecimals: false,
title: {
text: graphTrans.generalGraph['RATINGS']
}
}
});
The problem comes when I add xAxis: {, particularly type: 'datetime'. It seems it doesn't like it and the date appears completely disrupted as following:
Jan 00:00:00.001 00:00:00.002 00:00:00.003 00:00:00.004 00:00:00.005 00:00:00.006
Instead of Février to Août.
When I remove type: 'datetime' everything works but the months are not translated anymore
I have not a clue about what it is. Any idea?
I have some trouble with HighCharts, i can't figure out how to use hours. For now i manage to use day hours (00 to 24) but it stop at 24 and restart at 0 because HighCharts consider that a day is pass. I just want to have an hour value like 1h30 or 55h10 for example.
Here is my chart :
$('#chart2').highcharts({
chart: {
type: 'column',
plotBackgroundColor: null,
plotBorderWidth: 0,
borderWidth: 2,
borderRadius: 7,
borderColor: '#D8D8D8',
width:dialogWidth/2,
height:dialogWidth/2+50
},
title: {
text: 'Time Worked per Day'
},
xAxis: {
type: 'category'
},
yAxis: {
type: 'datetime', //y-axis will be in milliseconds
dateTimeLabelFormats: { //force all formats to be hour:minute:second
second: '%H:%M',
minute: '%H:%M',
hour: '%H:%M',
day: '%d %H:%M',
week: '%H:%M',
month: '%H:%M',
year: '%H:%M'
},
title: {
text: 'Hours'
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function() {
return Highcharts.dateFormat('%Hh%M',new Date(this.y));
}
}
}
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name +' : </b>' +
Highcharts.dateFormat('%Hh%M',new Date(this.y));
}
},
series: [{
name: 'Hours',
colorByPoint: true,
data: datas
}]
});
Hope you can help.
You don't need to use datetime for figuring this out. Since what you want to know is the number of hours per day, based on a value in milliseconds from your JSON data, you need to treat that value as a number, not a date.
Here's how I solved this problem:
First, I changed how you described the labels in your y-axis. I dropped the datetime type and used the formatter function to show the labels as whole hours. I also defined a tickInterval to show the labels one hour apart from one another.
yAxis: {
labels: {
formatter: function() {
// show the labels as whole hours (3600000 milliseconds = 1 hour)
return Highcharts.numberFormat(this.value/3600000,0);
}
},
title: {
text: 'Hours'
},
tickInterval: 3600000 // number of milliseconds in one hour
},
Next, I updated the code in your tooltip. We're taking your y values and making them whole hours. I set the second parameter in Highcharts.numberFormat to "2" so your toolip values show up with two decimal places (such as "2.50" for two-and-one-half hours).
tooltip: {
formatter: function() {
return '<b>' + this.series.name +' : </b>' +
Highcharts.numberFormat(this.y/3600000,2);
}
},
You can see a working fiddle, based off the sample data you provided, here: http://jsfiddle.net/brightmatrix/kk7odqez/
Here's a screenshot I took of the chart in this fiddle, showing how both the labels and tooltip now appear:
Thank you for the additional information you provided in your comments. That really helped me puzzle this out and get you what I hope is a useful solution.