We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

DoughnutSeries SelectedDataPointIndex TwoWay Binding

Thread ID:

Created:

Updated:

Platform:

Replies:

126181 Sep 28,2016 07:40 PM Sep 30,2016 08:25 AM Xamarin.Forms 3
loading
Tags: SfChart
Juan (Charly) Garibay
Asked On September 28, 2016 07:40 PM

Hi guys,

I'm using Syncfusion Xamarin SfChart to display a Doughnut Chart in one of my projects. I have a items list and a chart. When I select an item from list I set SelectedDataPointIndex of chart through a property in viewmodel, all works fine. But when I touch a chart fragment nothing happens in my viewmodel, it doesn't detect the new index.

I'm using Syncfusion.SfChart.XForms version 14.2451.0.32.

Here is my code:

------------------------------------------------------------------------------------------
<chart:SfChart BackgroundColor="White" HeightRequest="200">
    <chart:SfChart.Title>
        <chart:ChartTitle Text="Doughnut Chart" TextColor="White"/>
    </chart:SfChart.Title>
    <chart:SfChart.Series>
        <chart:DoughnutSeries ItemsSource="{Binding Accounts}"
            XBindingPath="Description"
            YBindingPath="Amount"
            ExplodeOnTouch="False"
            EnableAnimation="True"
            StrokeWidth="2"
            StrokeColor="White"
            DoughnutCoefficient="0.75"
            EnableDataPointSelection="True"
            SelectedDataPointColor="#1094F6"
            SelectedDataPointIndex="{Binding Chart_SelectionIndex}">
            <chart:DoughnutSeries.ColorModel>
                <chart:ChartColorModel Palette="Custom" CustomBrushes="{Binding Colors}"/>
            </chart:DoughnutSeries.ColorModel>
        </chart:DoughnutSeries>
    </chart:SfChart.Series>
</chart:SfChart>

<ListView ItemsSource="{Binding Accounts}" HeightRequest="200" SelectedItem="{Binding List_SelectedItem}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Padding="5,5">
                    <Label Text="{Binding Description}" />
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

------------------------------------------------------------------------------------------
public class DoughnutViewModel : INotifyPropertyChanged
    {
        #region Chart
        private int Chart_selectionIndex;
        public int Chart_SelectionIndex
        {
            get
            {
                return Chart_selectionIndex;
            }
            set
            {
                Chart_selectionIndex = value;
                OnPropertyChanged();
            }
        }
        #endregion

        #region List
        private Account List_selectedItem;
        public Account List_SelectedItem
        {
            get
            {
                return List_selectedItem;
            }
            set
            {
                List_selectedItem = value;

                var index = Accounts.IndexOf(value);
                Chart_SelectionIndex = index;

                OnPropertyChanged();
            }
        }
        #endregion

        #region Property Changed
        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged([CallerMemberName] string property = null) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(property));
        #endregion

        public ObservableCollection<Account> Accounts { get; set; }

        public List<Color> Colors { get; set; }

        public DoughnutViewModel()
        {
            Accounts = new ObservableCollection<Account>();
            Accounts.Add(new Account { Description = "Checking 1", Amount = 1000 });
            Accounts.Add(new Account { Description = "Checking 2", Amount = 2000 });
            Accounts.Add(new Account { Description = "Checking 3", Amount = 3000 });
            Accounts.Add(new Account { Description = "Checking 5", Amount = 5000 });
            Accounts.Add(new Account { Description = "Checking 8", Amount = 8000 });
            Accounts.Add(new Account { Description = "Checking 13", Amount = 13000 });

            Colors = new List<Color>();
            Colors.Add(Color.FromHex("#D2D4D7"));
        }
    }

------------------------------------------------------------------------------------------
What could it be?

Thanks in advance,

Jaikrishna Chandrasekar [Syncfusion]
Replied On September 29, 2016 02:18 PM

Hi Juan, 

Thanks for contacting Syncfusion support. 

We have analyzed your code snippet and founded that code for selecting the list item when touching the chart fragment was missing . We have modified the code and prepared a sample based on your requirement, it can be downloaded from the below location. 

Please let us know if you have any queries. 

Regards,
Jaikrishna C 


Juan (Charly) Garibay
Replied On September 29, 2016 04:10 PM

Hi Jaikrishna,

I downloaded the sample and when I select/touch a chart fragment, It doesn't update list selection.

:S 

It seems chart never updates a binding property but it updates selection based in binding property.

Jaikrishna Chandrasekar [Syncfusion]
Replied On September 30, 2016 08:25 AM

Hi Juan, 

Sorry for the inconvenience caused.  

We have modified a sample based on your requirement and it can be downloaded from the below location. 

Regards,
Jaikrishna C  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;