This is a migrated thread and some comments may be shown as answers.

Filtering chart by date

5 Answers 217 Views
Charts
This is a migrated thread and some comments may be shown as answers.
n/a
Top achievements
Rank 1
n/a asked on 16 May 2019, 10:13 AM

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

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 20 May 2019, 07:26 AM
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

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
n/a
Top achievements
Rank 1
answered on 20 May 2019, 02:17 PM

Thanks for the answer, the problem with this method is that the dates are written a multitude of times on the X axis. How can we avoid this and have the same format as in the first example?

dojo

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
Alex Hajigeorgieva
Telerik team
answered on 22 May 2019, 02:36 PM
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:

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!
Tags
Charts
Asked by
n/a
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
n/a
Top achievements
Rank 1
Share this question
or