This is a migrated thread and some comments may be shown as answers.
Stacked area series on Android gives weird result
2 Answers 2 Views
This is a migrated thread and some comments may be shown as answers.
Michel
Top achievements
Rank 1
Michel asked on 09 Feb 2018, 07:46 AM

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>

2 Answers, 1 is accepted

Sort by
0
Michel
Top achievements
Rank 1
answered on 13 Feb 2018, 01:56 PM

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.

 

 

0
Ves
Telerik team
answered on 13 Feb 2018, 05:07 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Chart
Asked by
Michel
Top achievements
Rank 1
Answers by
Michel
Top achievements
Rank 1
Ves
Telerik team
Share this question
or