Add interactivity to Chart(Click event)

Oct 15, 2013 at 11:12 AM
Edited Oct 15, 2013 at 11:13 AM
I need to handle the click event on the chart, upon click it could just return me the associated object. I am following the code from the documentation section and it has a "SelectedItem" property in it, but is not working.

Upon click on the pie, item got selected and thus change the background of the pie piece which makes me sure there is a way to get it done.
Oct 29, 2014 at 7:36 AM
Edited Oct 29, 2014 at 7:38 AM
selected item works , you need to implement the INotifyPropertyChanged on the viewModel and handle the PropertyChanged event , then when it changes you can get the value of the current series point selected.


first create the BaseViewModel so you dont need to define it in every viewModel
public class BaseViewModel : INotifyPropertyChanged
    {

        #region INotifyPropertyChanged

        public event PropertyChangedEventHandler PropertyChanged;

        public void onPropertyChanged(string name)
        {
            var handler = PropertyChanged;

            if (handler != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(name));
            }
        }

        #endregion

    }
then inherit your VMs from baseViewModel
public class ReportViewModel :BaseViewModel
    {
        public ObservableCollection<TestClass> Errors { get; private set; }

        private object selectedItem = null;
        public object SelectedItem
        {
            get
            {
                return selectedItem;
            }
            set
            {
                if (value != selectedItem)
                {
                    selectedItem = value;
                    onPropertyChanged("SelectedItem");

                    selectedItemChangeHandler();
                } 

            }
        }

        public ReportViewModel()
        {
            Errors = new ObservableCollection<TestClass>();
            Errors.Add(new TestClass() { Category = "Globalization", Number = 75 });
            Errors.Add(new TestClass() { Category = "Features", Number = 2 });
            Errors.Add(new TestClass() { Category = "ContentTypes", Number = 12 });
            Errors.Add(new TestClass() { Category = "Correctness", Number = 83 });
            Errors.Add(new TestClass() { Category = "Best Practices", Number = 29 });
        }

        private void selectedItemChangeHandler()
        {
                  //HERE YOU CAN GET THE SELECTED POINT AND HANDLE IT
        }
    }

    public class TestClass
    {
        public string Category { get; set; }

        public int Number { get; set; }
    }
finally add the datacontext to view , i think you already done that
public partial class BestRoute : UserControl
    {
        
        public BestRoute()
        {
            InitializeComponent();

            this.DataContext = new ReportViewModel();
        }


    }
bestRouteView
<chart:PieChart Grid.Row="1" Width="500" Height="500"
                                    ChartTitle="Minimal Pie Chart"
                                    ChartSubTitle="Chart with fixed width and height"
                                    SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}" >
                        <chart:PieChart.Series>
                            <chart:ChartSeries
                                SeriesTitle="Errors"
                                DisplayMember="Category"
                                ValueMember="Number"
                                ItemsSource="{Binding Path=Errors}"  />
                        </chart:PieChart.Series>
                    </chart:PieChart>
May 22, 2015 at 10:46 AM
I need to handle which item we click on using selected item in pie chart can you help me on this..........?

How to detect which item is clicked in pie chart? help me please