RadPieChart sometimes disappeared from view

6 posts, 0 answers
  1. Hady
    Hady avatar
    9 posts
    Member since:
    Oct 2018

    Posted 15 Nov 2018 Link to this post

    I am using RadPieChart inside RadSlideView. there are five views that already bind to RadSlideView.

    When i swipe right to the last view and then swipe left to first view. Some Charts disappeared and while other controls appear well.

    this is Xaml Code

    01.<telerikPrimitives:RadSlideView ItemsSource="{Binding MyItems}" ShowButtons="False" SelectedIndicatorColor="White" IndicatorColor="LightBlue">
    02.    <telerikPrimitives:RadSlideView.ItemTemplate>
    03.        <DataTemplate>
    04.            <Grid Padding="10">
    05.                <Grid.RowDefinitions>
    06.                    <RowDefinition Height="Auto" />
    07.                    <RowDefinition Height="300" />
    08.                </Grid.RowDefinitions>
    09.                <StackLayout Grid.Row="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
    10.                    <Label Text="{Binding Content}"
    11.                           TextColor="White"
    12.                           HorizontalTextAlignment="Center"
    13.                           VerticalOptions="CenterAndExpand" />
    14.                </StackLayout>
    15. 
    16.                <Label  Grid.Row="1" Text="{Binding ChartValue}"
    17.                        TextColor="White"
    18.                        FontAttributes="Bold"
    19.                        BackgroundColor="Transparent"
    20.                        FontSize="32"
    21.                        HorizontalTextAlignment="Center"
    22.                        HorizontalOptions="CenterAndExpand"
    23.                        VerticalOptions="CenterAndExpand" />
    24. 
    25.                <telerikChart:RadPieChart Grid.Row="1" BackgroundColor="Transparent" Palette="{Binding ChartPalette}">
    26.                    <telerikChart:RadPieChart.Series>
    27.                        <telerikChart:DonutSeries ItemsSource="{Binding Data}" ShowLabels="False"
    28.                                                  RadiusFactor="0.9" InnerRadiusFactor="0.7"
    29.                                                  ValueBinding="Value"/>
    30.                    </telerikChart:RadPieChart.Series>
    31.                </telerikChart:RadPieChart>
    32.            </Grid>
    33.        </DataTemplate>
    34.    </telerikPrimitives:RadSlideView.ItemTemplate>
    35.</telerikPrimitives:RadSlideView>

    this is the ViewModel Code

    01.public class MainPageViewModel
    02.   {
    03.       public MainPageViewModel()
    04.       {
    05.           MyItems = GetMockData();
    06.       }
    07. 
    08.       public ObservableCollection<MyItem> MyItems { get; set; }
    09. 
    10.       private ObservableCollection<MyItem> GetMockData()
    11.       {
    12.           return new ObservableCollection<MyItem>
    13.           {
    14.               new MyItem
    15.               {
    16.                   Content = "Comm Fail",
    17.                   ChartValue = "29%",
    18.                   Data = new ObservableCollection<PieCategoricalData>  {
    19.                       new PieCategoricalData { Category = "A", Value = 71 },
    20.                       new PieCategoricalData { Category = "B", Value = 29 }
    21.                   },
    22.                   ChartPalette = GetPalettes("#FFC706")
    23.               },
    24.               new MyItem
    25.               {
    26.                   Content = "Flash",
    27.                   ChartValue = "8%",
    28.                   Data = new ObservableCollection<PieCategoricalData>  {
    29.                       new PieCategoricalData { Category = "A", Value = 92 },
    30.                       new PieCategoricalData { Category = "B", Value = 8 }
    31.                   },
    32.                   ChartPalette = GetPalettes("#E94135")
    33.               },
    34.               new MyItem
    35.               {
    36.                   Content = "Conflict",
    37.                   ChartValue = "1%",
    38.                   Data = new ObservableCollection<PieCategoricalData>  {
    39.                       new PieCategoricalData { Category = "A", Value = 99 },
    40.                       new PieCategoricalData { Category = "B", Value = 1 }
    41.                   },
    42.                   ChartPalette = GetPalettes("#384CA9")
    43.               },
    44.               new MyItem
    45.               {
    46.                   Content = "Disabled",
    47.                   ChartValue = "2%",
    48.                   Data = new ObservableCollection<PieCategoricalData>  {
    49.                       new PieCategoricalData { Category = "A", Value = 98 },
    50.                       new PieCategoricalData { Category = "B", Value = 2 }
    51.                   },
    52.                   ChartPalette = GetPalettes("#BFBFBF")
    53.               },
    54.               new MyItem
    55.               {
    56.                   Content = "Police Flash",
    57.                   ChartValue = "0%",
    58.                   Data = new ObservableCollection<PieCategoricalData>  {
    59.                       new PieCategoricalData { Category = "A", Value = 100 },
    60.                       new PieCategoricalData { Category = "B", Value = 0 }
    61.                   },
    62.                   ChartPalette = GetPalettes("#624698")
    63.               }
    64.           };
    65.       }
    66. 
    67.       private ChartPalette GetPalettes(string colorHexValue)
    68.       {
    69.           ChartPalette palette = new ChartPalette();
    70. 
    71.           palette.Entries.Add(new PaletteEntry()
    72.           { FillColor = Color.Transparent, StrokeColor = Color.White });
    73.           palette.Entries.Add(new PaletteEntry()
    74.           { FillColor = Color.FromHex(colorHexValue), StrokeColor = Color.White });
    75. 
    76.           return palette;
    77.       }
    78.   }
    79.   public class MyItem
    80.   {
    81.       public string Content { get; set; }
    82.       public string ChartValue { get; set; }
    83. 
    84.       public ChartPalette ChartPalette { get; set; }
    85. 
    86.       public ObservableCollection<PieCategoricalData> Data { get; set; }
    87.   }
    88. 
    89.   public class PieCategoricalData
    90.   {
    91.       public object Category { get; set; }
    92. 
    93.       public double Value { get; set; }
    94.   }

     

    There is a label that has the same Grid cell of the Chart. i am using this label to display a specific legend series. 

  2. Hady
    Hady avatar
    9 posts
    Member since:
    Oct 2018

    Posted 15 Nov 2018 in reply to Hady Link to this post

    I am using Xamarin Forms 3.1,Telerik.UI.For.Xamarin 2018.3.1018.1 and Android 8.1
  3. Didi
    Admin
    Didi avatar
    384 posts

    Posted 19 Nov 2018 Link to this post

    Hello Hady,

    Thank you for the provided code.

    I have tested the described scenario and I have reproduced the issue. It seems that the chart is not measured correctly when it is positioned inside a Grid with RowHeight = "Auto".
    Currently the workaround I could suggest is to set the Grid RowHeight = "*". I have attached the sample for reference.

    Please take a look at the provided project and let me know if you have any additional questions.

    Regards,
    Didi
    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
  4. Hady
    Hady avatar
    9 posts
    Member since:
    Oct 2018

    Posted 19 Nov 2018 in reply to Didi Link to this post

    Hello Didi,

    Thank you so much for your reply.

    I tested your project and it works fine, and i am sorry for saying that in my case it doesn't work.

    My grid has 2 rows, first one contains label and  RowHeight="Auto". second one contains Chart and another label and RowHeight="300". the reason of setting RowHeight="300" that we are going to add another row contains list view. When the RowHeight="*" the chart works fine but when i modified it to RowHeight="300" the issue is reproduced.  Is there any other workaround that? 

  5. Didi
    Admin
    Didi avatar
    384 posts

    Posted 20 Nov 2018 Link to this post

    Hi Hady,

    I am sorry to hear that the provided workaround is not suitable for you. Another approach that could be used is to positioned the PieChart inside a Grid and on it to set Grid.Row="1".  In this case the RowHeight will be kept 300 - please refer to the attached project

    Indeed I have logged this issue with the SlideView control in our Feedback portal and you could follow the item on the provided link: SlideView: PieCharts disappear when sliding. I have also updated your Telerik points for this report.

    Let me know If you have any additional questions.

    Regards,
    Didi
    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
  6. Hady
    Hady avatar
    9 posts
    Member since:
    Oct 2018

    Posted 20 Nov 2018 in reply to Didi Link to this post

    Thanks Didi, it works now. 
Back to Top