scatter line chart displays wrong dates

4 posts, 0 answers
  1. SEAN
    SEAN avatar
    1 posts
    Member since:
    Aug 2013

    Posted 22 Oct 2013 Link to this post

    I use Kendo UI chart in scatter line mode to display data that was received from a sensor over time. I get the data from my server in JSON.
    Sometimes I don't want the chart to display all the data that was received from the server, 
    and sometimes I want to display a specific range of time (which the user had selected) even if there is no data at this time.
    in order to accomplish this i figured i need to set up the graph's xAxis option like this:
    xAxis: {
            min : fromSelectedTime,
            max : toSelectedTime,
            type: "date",    
        }

    but when I add this option to the graph it stops displaying the graph correctly:
    1) it only displays the min and max scales on the x axis and nothing in between.
    2) more important: the values are not aligned correctly respectively to the x axis
    (an item with the time of  1 pm on the 2nd of Oct for example is display before the 10/2 scale instead of after or not at all)
    I've created a JSFiddle that shows the problem:
    http://jsfiddle.net/ZZZF7/2/
    It shows wrong display of the graph.
    jsonData simulates the data that I  receive from the server. please not that in this case (but not always):
    the first item is later than the min time (data.From = Tue, 01 Oct 2013 12:35:00 GMT)
    and the last item is later than the max time (data.To = Wed, 02 Oct 2013 12:35:00 GMT).

    if you would remove lines 41-45 the graph is displayed as expected.
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 24 Oct 2013 Link to this post

    Hello Sean,

    In the current scenario I would recommend using a dataSource filter on the date field, for example:  
    var dataSource = new kendo.data.DataSource({
        data: data.Result,
        filter: [
            { field: "date", operator: "gt", value: kendo.parseDate(data.From) },
            { field: "date", operator: "lt", value: kendo.parseDate(data.To) }
        ],
        ...

     

    Regards,
    Alexander Popov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. SEAN
    SEAN avatar
    1 posts
    Member since:
    Aug 2013

    Posted 29 Oct 2013 Link to this post

    Hello,

    I have updated the sample page to better demonstrate the problem: 
    http://jsfiddle.net/ZZZF7/3/
    Please notice that not all points are aligned with the X Axis.
    (e.g. the fifth point from the left - date in tooltip equals 27.10.13 01:00 while the scale on the X Axis equals
    27.10.13 02:00 --> a deviation of an hour).
    In some cases the graphical deviation is more drastic.

    Please advice how can we solve this problem?
    (I have also included screenshot of the problem)

    Thanks ...
  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 29 Oct 2013 Link to this post

    Hi Sean,

    Thank you for the provided example. I reviewed it and noticed that dates are not converted to UTC, meaning that they are all created with a timezone offset. The daylight saving ends on October 27th and this creates a discrepancy, which is expected with this data. Here is a screenshot showing that behavior. I would recommend converting all dates to UTC both on server and client side to avoid such discrepancies.

    Regards,
    Alexander Popov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready