Trouble using utcoffset with Chart.js

Question

I'm trying to use Chart.js with a datetime x axis, and I need to adjust all my values by subtracting 5 hours. Here's some of my code:

var timeFormat = 'MM/DD HH:mm';

time: {
  format: timeFormat,
  tooltipFormat: 'll',
  parser: function(utcMoment) {
    return moment(utcMoment).utcOffset(5, true);
  }
},

Without the parser function, my values are normal (10:00, January 10, 2021), but with the parser function, for some reason my values are set back all the way to 2001. Yes two-thousand-and-one.(10:00, January 10, 2001) Note that the time is not actually changed (So two errors: 1.time not adjusted when it should be. 2:years adjusted when it shouldn't be). Why could this be?

Are you passing a `moment` object into `parser: function(utcMoment)` or is that a Date object? — codemonkey, Jan 10 '21 at 07:57
It's a actually a python DateTime object. Should this look different in this case? @codemonkey — bernardo, Jan 10 '21 at 16:58
Could you please `console.out(utcMoment)` right before `return moment(utcMoment).utcOffset(5, true);` line and show it here? — codemonkey, Jan 10 '21 at 17:38
My output is `1/10 18:5` for a time referring to January 10, 2021 at 18:05 — bernardo, Jan 10 '21 at 18:16
In this case, it's not wonder moment returns 2001. That date needs to be `1/10/2021 18:5` before it goes into moment. — codemonkey, Jan 10 '21 at 18:18

codemonkey · Accepted Answer · 2021-01-10T19:39:41.563

1

I will assume that the reason you want to roll it back by 5 hours is because of a timezone difference. If that's the case, you should use moment-timezone instead of moment.

With that said, subtracting 5 hours from the current date is actually simpler than what you're doing.

Before feeding a date into moment, you need to convert it to the js Date object like so: new Date('2021-01-10 00:00:00'). Since your parser function accepts the date in m/d H:M format, you would need to append the year to it first.

So here is how your code should look:

parser: function(utcMoment) {
    const new_date = utcMoment.split(' ')[0] + '/' + (new Date().getFullYear()) + ' ' + utcMoment.split(' ')[1];
    return moment(new Date(new_date)).subtract({hours: 5})
}

edited Jan 10 '21 at 19:39

answered Jan 10 '21 at 18:11

codemonkey

7,325
5
22
36

Thanks for your help, would this be inside of the parser function? If so, what should the return value of the function be – bernardo Jan 10 '21 at 18:18
@bernardo Please look at the newly added **EDIT** section. – codemonkey Jan 10 '21 at 18:31
I think I am very close. I outputted the return value to the console log and it looks like exactly what I needed, but for some reason the graph isn't showing up. Again I have `var timeFormat = 'M/D H:m';` and `time: { format: timeFormat, tooltipFormat: 'll', parser: function dd (utcMoment) { const new_date = utcMoment.split(' ')[0] + '/' + (new Date().getFullYear()) + ' ' + utcMoment.split(' ')[1]; return moment(new Date(new_date)).subtract({hours: 5}).format('M/D H:m');} }` – bernardo Jan 10 '21 at 18:53
The error I seem to be getting is Chart.min.js:14 Uncaught TypeError: a.isValid is not a function – bernardo Jan 10 '21 at 19:00
@bernardo Get rid of the `dd` part after function. Sorry, that was from my testing. I have updated the answer to show exactly how your parser should look. – codemonkey Jan 10 '21 at 19:06
ok I got rid of that. Again, this is very strange but without the parser function at all, the graph renders fine (without the time adjustment of course), but with the parser function I get the following error: 'Uncaught TypeError: a.isValid is not a function Chart.min.js:14'. EDIT: This error takes place at the line where I call var myChart = new Chart(ctx1, graph_data); – bernardo Jan 10 '21 at 19:11
@bernardo try changing this part “format('M/D H:m')” to “toDate()” – codemonkey Jan 10 '21 at 19:18
So the function reads `parser: function (utcMoment) { const new_date = utcMoment.split(' ')[0] + '/' + (new Date().getFullYear()) + ' ' + utcMoment.split(' ')[1]; console.log(new_date) return moment(new Date(new_date)).subtract({hours: 5}).toDate(); } with the same error. – bernardo Jan 10 '21 at 19:25
The error is Uncaught TypeError: a.isValid is not a function at a. (Chart.min.js:14) at Object.o.each (Chart.min.js:12) at a. (Chart.min.js:14) at Object.o.each (Chart.min.js:12) at a.determineDataLimits (Chart.min.js:14) at a.update (Chart.min.js:13) at n (Chart.min.js:12) at Object.o.each (Chart.min.js:12) at Object.update (Chart.min.js:12) at t.Controller.updateLayout (Chart.min.js:11) – bernardo Jan 10 '21 at 19:25
@bernardo I just looked at Chart.js docs. So the parser function has to return a Moment object. So look at the new edit of the answer. Your return should look like this: `return moment(new Date(new_date)).subtract({hours: 5})` – codemonkey Jan 10 '21 at 19:32
1

It works now, really appreciate it @codemonkey – bernardo Jan 10 '21 at 19:35
@bernardo Sorry about all the confusion. Should have checked out Chart.js docs from the start. – codemonkey Jan 10 '21 at 19:36

Trouble using utcoffset with Chart.js

1 Answers1