1. Home
  2. Forum
  3. Xamarin.Forms
  4. DoughnutSeries SelectedDataPointIndex TwoWay Binding

DoughnutSeries SelectedDataPointIndex TwoWay Binding

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,

3 Replies
JC Jaikrishna Chandrasekar Syncfusion Team September 29, 2016 06:18 PM UTC

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 


J( Juan (Charly) Garibay September 29, 2016 08:10 PM UTC

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.

JC Jaikrishna Chandrasekar Syncfusion Team September 30, 2016 12:25 PM UTC

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  


Loader.
Up arrow icon