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

DateTimeContinuousAxis MajorStepUnit Month Axis really buggy on iOs

4 Answers 18 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Felix
Top achievements
Rank 1
Felix asked on 25 Nov 2020, 03:23 AM

I try to use RadCartesianChart with numerical vertical axis and DateTimes on horizontal axis.

The dates only cover the current year.

The month labels should be placed evry quater: January, April, July, October (Maybe December as the end of the scale).

Here is a minimal code example:

<telerikChart:RadCartesianChart Grid.Row="1" x:Name="line_chart"  VerticalOptions="FillAndExpand">
    <telerikChart:RadCartesianChart.BindingContext>
        <local:ViewModel />
    </telerikChart:RadCartesianChart.BindingContext>
    <telerikChart:RadCartesianChart.HorizontalAxis>
        <telerikChart:DateTimeContinuousAxis Maximum="{Binding MinDate}" Maximum="{Binding MaxDate}" PlotMode="OnTicks" LabelFormat="MMM" MajorStepUnit="Month" LabelFitMode="Rotate" MajorStep="3" />
    </telerikChart:RadCartesianChart.HorizontalAxis>
    <telerikChart:RadCartesianChart.VerticalAxis>
        <telerikChart:NumericalAxis />
    </telerikChart:RadCartesianChart.VerticalAxis>
    <telerikChart:RadCartesianChart.Series>
        <telerikChart:LineSeries ValueBinding="Value"
                     CategoryBinding="Date"
                     ItemsSource="{Binding
public class ViewModel
{
    public ObservableCollection<CategoricalData> Dates { get; set; }
    public DateTime MinDate { get; set; } = new DateTime(DateTime.Now.Year, 1, 1);
    public DateTime MaxDate { get; set; } = new DateTime(DateTime.Now.Year, 12, 31);
 
    public ViewModel()
    {
            Dates = new ObservableCollection<CategoricalData>();
            Dates.Add(new CategoricalData() { Date = MinDate, Value = 40 });
            Dates.Add(new CategoricalData() { Date = MaxDate, Value = 40 });
    }
}
}" />
    </telerikChart:RadCartesianChart.Series>
</telerikChart:RadCartesianChart>

 

It looks exactly correct on Android but on iOS MaxDate and MajorStep are not respected and the distances are not equidistant.

4 Answers, 1 is accepted

Sort by
0
Didi
Telerik team
answered on 25 Nov 2020, 04:35 PM

Hello Felix,

Thank you for the provided code.

It seems you've come across the following known issues related to the DateTimeAxis on iOS: 

https://feedback.telerik.com/xamarin/1366298-chart-ios-datetimecontinuousaxis-displays-incorrect-labels-when-majorstepunit-is-month

https://feedback.telerik.com/xamarin/1366299-chart-ios-a-needless-label-is-displayed-at-the-end-for-datetimecontinuousaxis

If you remove the MajorStep property you will notice that for some months there are two labels (March), for some months there are no labels at all (October). 

I can assure you that both issues are escalated to the development team. I have also raised their priority based on your report. 

We need time to check whether a workaround can be applied and will write with more details on a day or two at latest.

Thank you for the understanding.

Regards,
Didi
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Didi
Telerik team
answered on 26 Nov 2020, 10:27 AM

Hi Felix,

I have tried to find a workaround for the DateTime axis using a custom renderer and custom label formatter but without a success. 

The approach I can suggest is using the Categorical axis. I have attached a sample project, please download and test on your side. 

I am sorry for the inconvenience caused.

Regards,
Didi
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Felix
Top achievements
Rank 1
answered on 01 Dec 2020, 12:59 PM

Hi Didi,

if i run youre example on android project its initial broken (See TelerikWE.PNG).

Ive tried youre workaround in my Project. Again its completely broken (See TelerikWeMyProject.PNG).

 

Regards

Felix

 

0
Didi
Telerik team
answered on 02 Dec 2020, 07:04 AM

Hi Felix, 

The provided workaround was for iOS. Yes, it seems that for Android the approach is not working as expected because of the type of Data property. I set it to be of type object, it should be of type DateTime. I have attached an updated version of the project. Please download and test on your side. 

I hope this solution will help you achieve the scenario you have.

Regards,
Didi
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Chart
Asked by
Felix
Top achievements
Rank 1
Answers by
Didi
Telerik team
Felix
Top achievements
Rank 1
Share this question
or