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

Stacked area series on Uwp throws out of range exception

4 Answers 80 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Michel
Top achievements
Rank 1
Michel asked on 09 Feb 2018, 08:49 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. The chart is in a tabview tab. Loading the screen is ok but the moment I click on the tab that contains the chart I get :

System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index
   at System.ThrowHelper.ThrowArgumentOutOfRange_IndexException()
   at Telerik.UI.Xaml.Controls.Chart.AreaRenderer.GetBottomPoints(AreaRenderContext context)
   at Telerik.UI.Xaml.Controls.Chart.AreaRendererBase.AddBottomPoints(AreaRenderContext context)
   at Telerik.UI.Xaml.Controls.Chart.AreaRendererBase.RenderCore()
   at Telerik.UI.Xaml.Controls.Chart.C

 

The tab that contains my char looks like this:

                <primitives:TabViewItem HeaderText="Traffic" IsSelected="{Binding Tabs[2], Mode=TwoWay}">
                    <primitives:TabViewItem.Content>
                        <StackLayout Orientation="Vertical">
                            <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>
                            <telerikChart:RadLegend LegendProvider="{x:Reference Name=chart}" 
                                                    LegendItemFontColor="Accent"
                                                    HeightRequest="60"/>
                        </StackLayout>
                    </primitives:TabViewItem.Content>
                </primitives:TabViewItem>

 

I am binding to a List of DateTimeModels

    public class DateTimeModel
    {
        public DateTime Date { get; set; }
        public int Value { get; set; }
    }

See also this thread:  https://www.telerik.com/forums/stacked-area-series-on-android-gives-weird-result

4 Answers, 1 is accepted

Sort by
0
Michel
Top achievements
Rank 1
answered on 13 Feb 2018, 01:59 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 UWP throw the exception
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 Uwp chart control.

0
Ves
Telerik team
answered on 13 Feb 2018, 05:43 PM
Hi Michel,

I am glad you have found the cause for the problem. As I said in my reply in your other forum thread -- please, do sort the data before sending it to the chart to avoid unexpected results.

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
0
Michel
Top achievements
Rank 1
answered on 15 Feb 2018, 10:15 AM

Hello Ves,

I will sort the data before before sending it to the chart. But I still feel that the chart control should NEVER EVER throw an unhandled exception if you don't do that. The chart control should check this internally before processing the data. Or you should mention it in the documentation.

But that is my opinion of course.

Beste Regards,

Michel.

0
Ves
Telerik team
answered on 20 Feb 2018, 09:22 AM
Hi Michel,

You are absolutely right. The control should either predict this and handle it gracefully or throw a dedicated exception. I have logged it here. I have also updated your Telerik points.

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