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

scatter line chart displays wrong dates

3 Answers 162 Views
Chart
This is a migrated thread and some comments may be shown as answers.
SEAN
Top achievements
Rank 1
SEAN asked on 22 Oct 2013, 03:22 PM
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.

3 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 24 Oct 2013, 12:42 PM
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!
0
SEAN
Top achievements
Rank 1
answered on 29 Oct 2013, 09:47 AM
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 ...
0
Alexander Popov
Telerik team
answered on 29 Oct 2013, 01:19 PM
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!
Tags
Chart
Asked by
SEAN
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
SEAN
Top achievements
Rank 1
Share this question
or