Hello,
I would like to be able to filter my chart according to dates. The problem is that the filter does not apply correctly. If I put the beach from May 1st to the end of May, I have dates of April and even February 2018 coming up.
Here is an example Dojo (Normally I receive the datasource dynamically)
Thank you for your help.
5 Answers, 1 is accepted
0
Hi,
Thank you very much for the provided runnable Dojo to illustrate the behaviour in your application.
The reason for it is that the dates are not seen as date, neither by Kendo UI nor by the browser and the same goes for the custom filter ui:
To remedy the situation, you can include a schema field parse function and provide the format against the date string will be parsed correctly:
https://docs.telerik.com/kendo-ui/globalization/intl/dateparsing
The other issue is the custom filtering UI which also does not filter using a date object but an invalid date. To fix this issue, get the value of the Kendo UI DatePicker instead of getting the val() of the input:
https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker/methods/value
Here is the updated Dojo which works as expected when the dates are valid JavaScript Dates:
https://dojo.telerik.com/@bubblemaster/oQiZuGIR/2
Let me know in case any additional questions arise.
Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Thank you very much for the provided runnable Dojo to illustrate the behaviour in your application.
The reason for it is that the dates are not seen as date, neither by Kendo UI nor by the browser and the same goes for the custom filter ui:
To remedy the situation, you can include a schema field parse function and provide the format against the date string will be parsed correctly:
https://docs.telerik.com/kendo-ui/globalization/intl/dateparsing
dataSource: {
data: seriesData,
schema:{
model: {
fields: {
AffichageDate: {
type:
"date"
,
parse:
function
(date){
return
kendo.parseDate(date,
"dd.MM.yyyy"
);
}
}
}
}
}
},
The other issue is the custom filtering UI which also does not filter using a date object but an invalid date. To fix this issue, get the value of the Kendo UI DatePicker instead of getting the val() of the input:
https://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker/methods/value
$(
"#filterByDateVol"
).on(
"click"
,
function
() {
var
startDate = $(
"#dateFromVol"
).data(
"kendoDatePicker"
).value();
var
endDate = $(
"#dateToVol"
).data(
"kendoDatePicker"
).value();
filterByDate(startDate,endDate,chartVol);
});
Here is the updated Dojo which works as expected when the dates are valid JavaScript Dates:
https://dojo.telerik.com/@bubblemaster/oQiZuGIR/2
Let me know in case any additional questions arise.
Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
0
n/a
Top achievements
Rank 1
answered on 21 May 2019, 10:43 AM
If I put a baseunit, it's working. But I must have only the values of my field "affichageDate" displayed on the axis (as my first dojo). How can I do that?
Thanks.
0
Hi,
The category axis is independent if you prefer to not use the built-in date options that it provides, you can supply an array of strings like you did before:
https://dojo.telerik.com/OSOwaceG/2
Kind Regards,
Alex Hajigeorgieva
Progress Telerik
The category axis is independent if you prefer to not use the built-in date options that it provides, you can supply an array of strings like you did before:
var
categories = seriesData.map(
function
(item){
return
item.AffichageDate
// this is a string, not a date
});
// chart config
categoryAxis: {
categories: categories,
https://dojo.telerik.com/OSOwaceG/2
Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
n/a
Top achievements
Rank 1
answered on 23 May 2019, 06:17 AM
Thanks a lot!