This is a migrated thread and some comments may be shown as answers.
RadPieChart sometimes disappeared from view
5 Answers 25 Views
This is a migrated thread and some comments may be shown as answers.
Hady
Top achievements
Rank 2
Hady asked on 15 Nov 2018, 10:34 AM

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. 

5 Answers, 1 is accepted

Sort by
0
Hady
Top achievements
Rank 2
answered on 15 Nov 2018, 02:25 PM
I am using Xamarin Forms 3.1,Telerik.UI.For.Xamarin 2018.3.1018.1 and Android 8.1
0
Didi
Telerik team
answered on 19 Nov 2018, 01:03 PM
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
0
Hady
Top achievements
Rank 2
answered on 19 Nov 2018, 02:56 PM
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? 

0
Didi
Telerik team
answered on 20 Nov 2018, 09:01 AM
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
0
Hady
Top achievements
Rank 2
answered on 20 Nov 2018, 12:36 PM
Thanks Didi, it works now. 
Tags
Chart
Asked by
Hady
Top achievements
Rank 2
Answers by
Hady
Top achievements
Rank 2
Didi
Telerik team
Share this question
or