Zoom DateTimeAxis and change date value depending on zoom factor

[khasan]

Hi there,

Currently I am using Syncfusion Chart with Line serias and it works good(in Xamarin project). It displays numeric value for Y axis and Date time for X axis. Curently the x-axis displays dates. When I zoom in, it still displays the same date. How can I change the code so that to display time (hour and minutes) when zoom in.

Thanks in advance

Khasan

[Parthiban Sundaram]

Hi Khasan,

Thanks for using Syncfusion products.

We have prepared the sample based on your requirement. Please download the sample from following location.

Sample: http://www.syncfusion.com/downloads/support/forum/128316/ze/ChartSample1609695631  

Regards,
Parthiban S
 

[khasan]

Hi Parthiban, thanks a lot for your for work

khasan

[Saravana Pandian Murugan]

Hi khasan,

Thanks for the update. We are glad to know that the given solution works. Please get back to us if you need further assistance.

Thanks,
Saravana Pandian M.

[khasan]

Hi Parthiban,

I am using the sample code that you send me in message above(http://www.syncfusion.com/downloads/support/forum/128316/ze/ChartSample1609695631). It works great except when I change Time Zone in my Phone/Emulator. For example for GMT-5 DateTimeAxis displays 6 hours off. For GMT+5 it is displayed correctly.

Here is the code that I use in my project:

dateTimeAxis.LabelCreated += (s, e) =>

            {

                DateTime dateTime;

                if (Device.OS == TargetPlatform.iOS)

                    dateTime = new DateTime(1900, 1, 1) + TimeSpan.FromDays(e.Position);

                else if (Device.OS == TargetPlatform.Android)

                    dateTime = new DateTime(1970, 1, 1) + TimeSpan.FromMilliseconds(e.Position);

                else

                    dateTime = new DateTime(1900, 1, 1) + TimeSpan.FromMilliseconds(e.Position);

             ////////The rest code is omitted

           };

Thanks in advance

Khasan

[Saravana Pandian Murugan]

Hi Khasan,

We would like to inform you that we are unable to reproduce the reported issue at our end. We have also attached the video of this sample’s behaviour in the below link.

Video : http://www.syncfusion.com/downloads/support/forum/128316/ze/TimeZone_Video2069356025

Could you please check and let us know if your issue is different from this.

We also request you to confirm us whether you are able to reproduce the reported issue in the provided sample.

Regards
Saravana Pandian M.

[khasan]

I can reproduce the Time Zone issue(displays incorrect DateRime) on the provided sample too. If I remove the whole LabelCreated event handler it works. So I think e.Position of LabelCreated doesn't work if I change Time Zone. Also it works if I set Time Zone to Automatic in Android Device Settings, but if I set manual and choose one of the specific time zone it doesn't work

Thanks

Khasan 

[Saravana Pandian Murugan]

Hi Khasan,

We have modified the previous updated sample. Please download the sample from the following location. Please get back to us if you are still facing any issues.

Sample : http://www.syncfusion.com/downloads/support/forum/128316/ze/ChartSample816007560

Regards,
Saravana Pandian M.

[khasan]

Hi Saravana Pandian,

Thanks a lot for your work, the updated version fix the Time zone issue

Regards

Khasan

[Saravana Pandian Murugan]

Hi khasan,

Thanks for the update. We are glad to know that the given solution works. Please get back to us if you need further assistance.

Thanks,
Saravana Pandian M.

[khasan]

Hi Saravana Pandian,

I still have issue(Time Zone issue) on iOS version, can you please help here again as you did for Android version. Sorry that I didn't reported I had issue on both platform(iOS, Android)

Thanks in advance

Khasan

[Saravana Pandian Murugan]

Hi Khasan,

We are sorry to inform you that we are unable to reproduce the reported issue in the sample which we provided in our previous update. We have also attached the video of this sample’s behaviour in iOS. Please download the video from below link.

Video : http://www.syncfusion.com/downloads/support/forum/128316/ze/TimeZone_Sample_Video835211272

Please update us with more details if you are still facing this issue.

Regards
Saravana Pandian M.

[khasan]

Hi Saravana Pandian,Thanks for the video, it actually demonstrates the issue - please take a look to the code especially to DataModel.cs file you will see that the first point has date value - 2/1/2010 and the last point has - 6/1/2010 but in the Video demonstration the first point has date value - 4/1/2010 and last point has 8/1/2010. So chart displays DateTime for two days ahead. If you remove LabelCreated event handler you will notice that it works correctly and as expected - first point starts as 2/1/2010 and the last as 6/1/2010.

Regarding TimeZone issue - in order to see it you need to change DataPoint collection so that it should have Time value too. Currently it contains only Date and time as 00:00:00. You can replace your DataPoint collection with this code:

Data.Add(new ChartDataPoint(new DateTime(2010, 1, 02, 16, 10, 5), 25));

Data.Add(new ChartDataPoint(new DateTime(2010, 1, 02, 16, 15, 6), 55));

Data.Add(new ChartDataPoint(new DateTime(2010, 1, 02, 16, 20, 48), 30));

Data.Add(new ChartDataPoint(new DateTime(2010, 1, 02, 16, 25, 12), 55));

Data.Add(new ChartDataPoint(new DateTime(2010, 1, 02, 16, 30, 4), 40));

In the above DataPoint collection the first point has DateTime value 2/1/2010 4:10:5 PM and the last point has DateTime value 2/1/2010 4:30:4. Now if you run with code above you will get the following:

1) For Kolkata(India) time zone - first data point's DateTime value will be displayed as 4/1/2010 4:10:35 PM(2 days and 30 sec ahead)

2) For Karachi(Pakistan) time zone - first data point's DateTime value will be displayed as 4/1/2010 4:10:47 PM(2 days and 42 sec ahead)

3) For London(UK) time zone - first data point's DateTime value will be displayed as 4/1/2010 4:11:03 PM(2 days and 58 sec ahead)

Note that date still is for two days ahead but doesn't change when you change Time Zone but time changes.

Thanks in advance

Khasan

[Saravana Pandian Murugan]

Hi Khasan,

Sorry for the inconvenience caused.

We have modified the sample as per your requirement which can be downloaded from the below location.

Sample : http://www.syncfusion.com/downloads/support/forum/128316/ze/TimeZoneSample-332638456  

Regards,
Saravana Pandian M.

[khasan]

Hi Saravana Pandian, thanks a lot for your hard work, this fixed issue with time zone in ios platform

Thanks

Khasan

[Saravana Pandian Murugan]

Hi Khasan,

Thanks for the update. We are glad to know that the given solution works. Please get back to us if you need further assistance.

Regards,
Saravana Pandian M.

[Nils Lahr]

Any suggestions on how to implement this feature in Blazor?  There doesn't seem to be a " LabelCreated " event.

[Durga Gopalakrishnan]

Hi Khasan, 

We have prepared sample based on your requirement. In Blazor chart, there is an OnAxisLabelRender to customize the axis labels based on your need, but by default, when LabelFormat is not specified for datetime axis, then axis labels will be changed automatically based on zooming since EnableAutoIntervalOnZooming is specified as true. Please check with the below sample. 

Video : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartZooming1471045454.zip 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Zooming-1658748909.zip 

Online Demo : https://blazor.syncfusion.com/demos/chart/zooming?theme=bootstrap4 

UG :  

https://blazor.syncfusion.com/documentation/chart/zooming/#auto-interval-on-zooming 

https://blazor.syncfusion.com/documentation/chart/events/#onaxislabelrender 

Kindly revert us if you have any concerns. 

Regards,  

Durga G