This is a migrated thread and some comments may be shown as answers.
RadPieChart is now working with RadSlideView
3 Answers 44 Views
This is a migrated thread and some comments may be shown as answers.
Hady
Top achievements
Rank 2
Hady asked on 13 Nov 2018, 10:08 AM

I am developing a page contains RadPieChart inside a RadSlideView. When i deploy the application on either iOS 12.1 or Android 8.1 RadPieChart doesn't display and other control works fine.

I am using Xamarin Forms 3.1 and Telerik.UI.For.Xamarin 2018.3.1018.1

i attached the Xaml code and ViewModel Code

3 Answers, 1 is accepted

Sort by
0
Accepted
Lance | Manager Technical Support
Telerik team
answered on 13 Nov 2018, 07:03 PM
Hello Hady,

This is happening because the PieChart has a data bound ItemsSource. It's important to understand that when you use the RadSlideView with ContentViews as the ItemsSource, the BindingContext is that ContentVie. The ContentView's content cannot inherit BindingContext from the page.

To be specific in your case, the BindingContext of the RadPieChart is not MainPageViewModel. Thus, the Data property is not visible to the chart and no items get rendered.


Data Binding Support

There is currently no way to pass the BindingContext down into the ContentView. However there is an approach you can use to facilitate this. Switch to using the ItemTemplate and provide a collection of objects (not Views) to the RadSlideView ItemsSource, see this RadSlideView documentation for an example.

To add to that example, if you want to provide an ItemsSource to the pie chart, then add a Data property to the Item class so that it's available to the DataTemplate:

public class MyItem
{
    public string Content { get; set; }
 
    public ObservableCollection<CategoricalData> Data { get; set; }
}

Then you can use that BindingContext in the DataTemplate to set the ItemsSource of the series:

<primitives:RadSlideView x:Name="slideView" ItemsSource="{Binding MyItems}">
    <primitives:RadSlideView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
 
                <Label Text="{Binding Content}" TextColor="#007ACC" HorizontalTextAlignment="Center"/>
 
                <chart:RadPieChart x:Name="pieChart"  Grid.Row="1">
                    <chart:RadPieChart.Series>
                        <chart:DonutSeries ItemsSource="{Binding Data}"  ShowLabels="False" ValueBinding="Value"/>
                    </chart:RadPieChart.Series>
                </chart:RadPieChart>
            </Grid>
        </DataTemplate>
    </primitives:RadSlideView.ItemTemplate>
</primitives:RadSlideView>

I've attached a full example of this approach, here are the slides at runtime:







Note: 
If you want different items on different slides, then you can use an ItemTemplateSelector to change the DataTemplate, see the ItemTemplateSelector documentation for a tutorial example.

Regards,
Lance | Tech Support Engineer, Sr.
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 14 Nov 2018, 11:51 AM
Thank you so much for your help. It works fine with me now. But i have another concern, i have 5 Donut charts each one has different chart palette colors. can i do it using template selector?.

I tried to bind the color to FillColor property and i found that is not a Bindable property 
0
Lance | Manager Technical Support
Telerik team
answered on 14 Nov 2018, 03:14 PM
Hi Hady,

Correct, FillColor is not a bindable property. Instead, you can set a custom palette for each chart. See the Custom Palette documentation for more information.

It's up to you on how you want to set the palette; dynamic (using a property on the slide's data model) or declarative using TemplateSelector and different DataTemplates.

Here's an example of setting it declaratively:

<telerikChart:YourChartTypeGoesHere.Palette>
        <telerikChart:ChartPalette>
            <telerikChart:ChartPalette.Entries>
                <telerikChart:PaletteEntry FillColor="Red" StrokeColor="Blue" />
                <telerikChart:PaletteEntry FillColor="Green" StrokeColor="Black" />
                <telerikChart:PaletteEntry FillColor="Blue" StrokeColor="Yellow" />
            </telerikChart:ChartPalette.Entries>
        </telerikChart:ChartPalette>
</telerikChart:YourChartTypeGoesHere.Palette>


If you have any trouble with this, please open a support ticket here so that you can get assistance directly from the chart development team.

Regards,
Lance | Tech Support Engineer, Sr.
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
Hady
Top achievements
Rank 2
Answers by
Lance | Manager Technical Support
Telerik team
Hady
Top achievements
Rank 2
Share this question
or