Native Chart doesn't work with ISO Date format

Progress® Kendo® UI for Vue Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 01 Apr 2022 09:25 by ADMIN

Daniel

Created on: 01 Apr 2022 07:46

Category: Chart

Type: Bug Report

Native Chart doesn't work with ISO Date format

Describe the bug
In a scenario where we want to display a Date in the Chart category, the Native Chart doesn't work when we use the ISO Date format

If we take the same project and use Date data like:

'2021-05-21' - everything is working correctly
'2021-05-21T11:21:50Z' - the execution of the project is blocked

Here is a working example with the first data type.

To Reproduce

Open this example. It is the same as the working one provided above but with Date data in ISO format
Run the project

Expected behavior
The Native Chart should be working correctly both with the non-ISO and ISO formatted data.

3 comments

ADMIN

Petar

Posted on: 01 Apr 2022 09:25

Hi Daniel,

You are right.

Thank you for mentioning the edge case with the timezones and thank you for sharing the solution you've implemented! I am sure your solution will help someone.

Regards,
Petar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Daniel

Posted on: 01 Apr 2022 09:04

Thanks for the workaround, Petar. Although it will not work well with time zones. I mention it because it is relevant to bug solving, especially because there can be differences in one day.

Say I'm in CET time (UTC+1) and the ISOString date is "2021-05-21T23:59:50Z" the date I need to see in the chart is "2021-05-22"

My workaround will be

let localDate = new Date("2022-04-01T23:59:00Z");

let validDate = localDate.getFullYear()+'-'+localDate.getMonth().toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false})+'-'+localDate.getDay().toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false});

Cumbersome but it works and it's somewhat solid.

ADMIN

Petar

Posted on: 01 Apr 2022 07:58

Hi Daniel,

As the current bug is a result of a ticket discussion, I am also sharing here the workaround that can be used before we fix the issue.

As the Native Chart is correctly working with a Date format like "YYYY-MM-DD" we can use the substring method to remove the symbols that we don't need from the ISO formatting. In a real-life scenario, once we fetch our Grid data, what we can do is loop it and apply the below method to the Date fields.

.substring(0,10)

With the above, a string like "2021-05-21T11:21:50Z" will become "2021-05-21".

Regards,
Petar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.