I'm having a problem with the label format of vis.js timeline. I want to display an excat time period of 1 hour and 30 minutes and the labels should only display the amount of minutes and seconds passed.
I configured the options like this:
let options = {
autoResize: true,
min: '2000-1-1 00:00:00',
max: '2000-1-1 01:30:00',
start: '2000-1-1 00:00:00',
end: '2000-1-1 01:30:00',
//zoomMax: 86399999,
zoomMin: 18000,
format: {
minorLabels: {
millisecond: '',
second: 'mm:ss',
minute: 'mm:ss',
hour: 'mm:ss',
weekday: '',
day: '',
week: '',
month: '',
year: ''
},
majorLabels: {
millisecond:'',
second: '',
minute: '',
hour: '',
weekday: '',
day: '',
week: '',
month: '',
year: ''
}
}
};
As far as I understood it, vis.js calls for the labels (second, minute, hour, etc.) the moment().format() function from moment.js. Is it somehow possible in moment.js formatting to add the amount of hours (H) times 60 to the minutes (mm) value in an easy way?
In my current configuration it restarts at 00 minutes after 60 minutes:
timeline
(And yes, I'm working on an application for soccer)
In the docs you can find option to customize date format via function:
You can also use a function format for each label. The function accepts as arguments the date, scale and step in that order, and expects to return a string for the label.
Below you can find converted time to minutes:
format: {
minorLabels: function (date, scale, step) {
var time = date.format("HH:mm");
return moment.duration(time).asMinutes();
},
majorLabels: function (date, scale, step) { return "" }
}
JSFiddle with example
Related
So I'm trying to follow the docs here on MDN regarding the date options for formatting
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
For the cs-cz locale, I want the month to be in "short" hand form when writing a date such as
19. 12. 2012 instead of 19. pro 201
This code works for locales such as en-us or it-it (italy) and others.
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200));
var options = { month: 'short', day: 'numeric', year: 'numeric'};
console.log(new Intl.DateTimeFormat('en-us', options).format(date));
Prints out Dec 19, 2012
Can anyone help me with getting the cs-cz locale to work. This code
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200));
var options = { month: 'short', day: 'numeric', year: 'numeric'};
console.log(new Intl.DateTimeFormat('cs-cz', options).format(date));
prints out
19. 12. 2012 instead of 19. pro 201
I'd like 19. pro 201 using the JavaScript Date Function. This is all dynamic in my code based on 13 locales and czech is the only one giving me trouble.
A weird conundrum for sure. As it turns out, if you include the week format in the options object it provides the output you seek. So the code below simple uses that and then removes the week name from the string.
I did not modify the year, and will leave that up to you, but I do believe this solves your problem and answers your question.
const options = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };
const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0, 200));
const out = date.toLocaleDateString('cs-CZ', options).split(' ').splice(1).join(' ');
console.log(out);
I am getting time HH:MM format using
dt.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' })
I need to add only minutes?
I am getting one more error this is my date (2018-08-15T06:08:55.000Z) here, when I try to display time it displays different time '11:38' I need '06:08'..
console.log('data as ', obj);
var dat = obj.starttime;
let dt = new Date(dat);
console.log('time from database' , dt);
console.log('getMinutes():' + dt.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' }) );
output of the console.log
data as { id: 4009,mid: 1,cid: 41,wid: 7138,oid: null,
status: null,options: null, starttime: '2018-08-15T06:08:55.000Z',
duration: null,ordertotal: 50,counter: null,closetime: null }
time from database 2018-08-15T06:08:55.000Z
getMinutes():11:38 AM
Here I am getting different time than required time...and I need to add only minutes to it.
You should add the timeZone option and to add minutes use Date.setMinutes():
var dat = '2018-08-15T06:08:55.000Z'; //obj.starttime;
let dt = new Date(dat);
console.log('getMinutes(): ' + dt.toLocaleTimeString('en-US', { timeZone: 'UTC', hour: 'numeric', minute: 'numeric' }) );
// to Add minutes:
dt.setMinutes(dt.getMinutes() + 10);
console.log('getMinutes(): ' + dt.toLocaleTimeString('en-US', { timeZone: 'UTC', hour: 'numeric', minute: 'numeric' }) );
I've been messing around with chart.js time options (displayFormat and tooltipFormat):
type: 'time',
unit: 'day',
unitStepSize: 1,
time: {
displayFormats: {
'day': 'dd',
},
tooltipFormat: 'll'
},
Which works as expected - on a 17inch laptop screen.
This shows dates as Mo, Tu, We, Th, Fr, Sa, Su.
However on a 24inch monitor chart.js automatically alters the dates and they become:
Aug 18 12AM - Aug 18 12PM, Aug 19 12AM - Aug 19 12PM, etc
How can I stop this from happening?
You need to set the hour property of displayFormats to dd as well, like so :
...
time: {
displayFormats: {
'day': 'dd',
'hour': 'dd' //<-- set this
},
tooltipFormat: 'll'
},
...
I was tasked to do a basic timeline using the components of vis.js, the question is that I'm from Brazil, and the timeline os vis.js displays months in English and I need them to be in Portuguese, studying the docs I found something about locale that allows the change in language, but as much as I tried, I couldn't change it.
It would be of great help if you could help me do it, here is my code regarding the change in language:
var options = {
width: "100%",
height: "381px",
timeAxis: {scale: 'year', step: 1},
zoomable: false,
maxMinorChars: 1,
locales: {
mylocale: {
current: 'atual',
time: 'tempo'
}
},
locale: 'mylocale',
format: {
minorLabels: {
day: 'DD',
month: 'MMMM',
year: 'YYYY'
},
majorLabels: {
day: 'DD',
month: 'MMMM',
year: 'YYYY'
}
}
};
Code was based on this links:
(http://visjs.org/docs/timeline/)
(http://momentjs.com/)
I know this question is old and I don't know if the version of vis.js supported this when you asked the question, but...
the minorLabels and majorLabels can be functions instead of an object and you can return whatever string you want. The functions take 3 arguments (date, scale, step).
options: {
format: {
minorLabels: function (date, scale, step) {
// return minor label with date in your locale
},
majorLabels: function (date, scale, step) {
// return major label with date in your locale
}
}
}
I would like to customize the date aggregate(axis labels) for amCharts, but I couldn't find a provision to do this in amCharts docs. Googling the same just pointed me to the dateFormats documentation.
amCharts provides an option for aggregating date by setting parseDates to true and adding dateFormats as shown below. This option aggregates date by doing some calculation by amCharts itself, let's say 25 days for week aggregation(Jan 5), 65 days for month aggregation(Jan) and so on, but I would like to customize the default date aggregation level.
parseDates: true,
dateFormats: [{
fff: 'period',
format: 'JJ:NN:SS'
}, {
period: 'ss',
format: 'JJ:NN:SS'
}, {
period: 'mm',
format: 'JJ:NN'
}, {
period: 'hh',
format: 'JJ:NN'
}, {
period: 'DD', // day level
format: 'MM/DD/YYYY'
}, {
period: 'WW', // week level
format: 'MM/W/YYYY'
}, {
period: 'MM', // month level
format: 'MMM YYYY'
}, {
period: 'YYYY',
format: 'YYYY'
}]
I would like to change the default day, week, month levels in the following manner.
DAY LEVEL: <= 14 days
WEEK LEVEL: 14 < x <= 91
MONTH LEVEL: 91 < x <= 731
I would like to customize the date aggregation levels in amCharts. How could I do this? Any help would be appreciated. Thanks in advance.
You can't set this so precisely. The next period is chosen when there are too many items in the selected period. You can try adjusting minHorizontalGap value of CategoryAxis: http://docs.amcharts.com/3/javascriptcharts/CategoryAxis#minHorizontalGap (default is 75). If you make it smaller, more items will fit and you'll have more labels.