Stacked area series on Android gives weird result

[Michel]

I have two collections of int/datetime which I want to stack in an area diagram. Therefore I am using Combinemode="Stack" in my area series and on iOS this works very nice. See screenshot 1. But on Android the result is draw incorrect. See screenshot 2. Is this a bug or is there something wrong with my code?

This part is the code for the chart:

                            <telerikChart:RadCartesianChart SelectionPaletteName="Light" x:Name="chart" VerticalOptions="FillAndExpand">
                                <telerikChart:RadCartesianChart.HorizontalAxis>
                                    <telerikChart:DateTimeContinuousAxis LabelFormat="dd" GapLength="0.3" PlotMode="OnTicks" MajorStepUnit="Day" MajorStep="1" />
                                </telerikChart:RadCartesianChart.HorizontalAxis>
                                <telerikChart:RadCartesianChart.VerticalAxis>
                                    <telerikChart:NumericalAxis Minimum="0"/>
                                </telerikChart:RadCartesianChart.VerticalAxis>
                                <telerikChart:RadCartesianChart.Series>
                                    <telerikChart:AreaSeries ItemsSource="{Binding CowsMilked}" DisplayName="Milked" CombineMode="Stack" Fill="LightCoral">
                                        <telerikChart:AreaSeries.ValueBinding>
                                            <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
                                        </telerikChart:AreaSeries.ValueBinding>
                                        <telerikChart:AreaSeries.CategoryBinding>
                                            <telerikChart:PropertyNameDataPointBinding PropertyName="Date"/>
                                        </telerikChart:AreaSeries.CategoryBinding>
                                    </telerikChart:AreaSeries>
                                    <telerikChart:AreaSeries ItemsSource="{Binding CowsRejected}" DisplayName="Rejected" CombineMode="Stack" Fill="LightSkyBlue">
                                        <telerikChart:AreaSeries.ValueBinding>
                                            <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/>
                                        </telerikChart:AreaSeries.ValueBinding>
                                        <telerikChart:AreaSeries.CategoryBinding>
                                            <telerikChart:PropertyNameDataPointBinding PropertyName="Date"/>
                                        </telerikChart:AreaSeries.CategoryBinding>
                                    </telerikChart:AreaSeries>                                
                                </telerikChart:RadCartesianChart.Series>
                            </telerikChart:RadCartesianChart>

[Michel]

I finally found found the issue. If you are binding to a DateTime on the horizontal axis and the order of your collection is from future to past it will only on Android give the result you can see in de screenshot.

So if I bind to something like this it is fine:

            var seriesData = new ObservableCollection<DateTimeModel>()
            {
                new DateTimeModel(){Date = DateTime.Now, Value = 5},
                new DateTimeModel(){Date = DateTime.Now.AddDays(1), Value = 15},
                new DateTimeModel(){Date = DateTime.Now.AddDays(2), Value = 4},
                new DateTimeModel(){Date = DateTime.Now.AddDays(3), Value = 45},
                new DateTimeModel(){Date = DateTime.Now.AddDays(4), Value = 10}
            };

But if you bind something like this is is a problem:

            var seriesData = new ObservableCollection<DateTimeModel>()
            {
                new DateTimeModel(){Date = DateTime.Now, Value = 5},
                new DateTimeModel(){Date = DateTime.Now.AddDays(-1), Value = 15},
                new DateTimeModel(){Date = DateTime.Now.AddDays(-2), Value = 4},
                new DateTimeModel(){Date = DateTime.Now.AddDays(-3), Value = 45},
                new DateTimeModel(){Date = DateTime.Now.AddDays(-4), Value = 10}
            };

On iOS its no problem so my feeling is that this is a bug in the android chart control.

 

 

[Ves]

Hi Michel,

I am glad you have found the cause. While the setup you mentioned works on iOS, the general approach and guidance here would be to sort the data as a prerequisit before sending it to the chart.

Best regards,
Ves
Progress Telerik