Having n wedges in a Pie Chart or other charts using WPF and LVC(LiveCharts)

Question

I have been trying to incorporate pie charts using LVC, and it works great. I've been playing around with this simple code... .xml....

<UserControl x:Class="UI.PieChart"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:UI"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="500"
             d:DataContext = "{d:DesignInstance local:PieChart}">
    <Grid>
        <lvc:PieChart LegendLocation="Bottom" DataClick="Chart_OnDataClick" Hoverable="False" DataTooltip="{x:Null}">
            <lvc:PieChart.Series>
                <lvc:PieSeries Name ="Portion" Title="Maria" Values="3" DataLabels="True"
                               LabelPoint="{Binding PointLabel0}"/>
                <lvc:PieSeries Title="Charles" Values="4" DataLabels="True" 
                               LabelPoint="{Binding PointLabel1}"/>
                <lvc:PieSeries Title="Frida" Values="6" DataLabels="True" 
                               LabelPoint="{Binding PointLabel2}"/>
                <lvc:PieSeries Title="Frederic" Values="2" DataLabels="True" 
                               LabelPoint="{Binding PointLabel3}"/>
            </lvc:PieChart.Series>
        </lvc:PieChart>
    </Grid>
</UserControl>

and this code which activates the user actions... .xaml.cs

namespace UI
{
    /// <summary>
    /// Interaction logic for DataChart.xaml
    /// </summary>
    public partial class PieChart : UserControl
    {
        public PieChart()
        {
            InitializeComponent();
            PieSeries()
            PointLabel = chartPoint =>
                            string.Format("{0} ({1:P})", chartPoint.Y, chartPoint.Participation);

            DataContext = this;
        }
        public Func<ChartPoint, String> PointLabel { get; set;}

        private void Chart_OnDataClick(object sender, ChartPoint chartpoint)
        {
            var chart = (LiveCharts.Wpf.PieChart) chartpoint.ChartView;

            foreach (PieSeries series in chart.Series)
                series.PushOut = 0;
            var selectedSeries = (PieSeries)chartpoint.SeriesView;
            selectedSeries.PushOut = 8;
        }
    }
}

I am totally new to C#, .xaml, WPF, and LVC... But what I would like to do is not hardcode the amount of wedges in the PIE chart. Instead, I'd like to create a pie chart based on the data I'm given. I'd like to do this in C#. Where when I instantiate the class PieChart(). I can pass 5 in the parameter like so, PieChart(5). Then that will create the PieChart, and then continue to create 5 PieSeries or 5 wedges... side question, are there better tools to this then LVC or even WPF?

Answer 1

One approach would be to create a SeriesCollection, add a list of PieSeries to this based on some user input, and bind your PieChart in XAML to the SeriesCollection. You'll need to implement INotifyPropertyChanged as well to ensure that changes to the SeriesCollection are reflected in the user interface (here implemented in RaisePropertyChanged):

The SeriesCollection that you'll bind to:

    private SeriesCollection myPie = new SeriesCollection();
    public SeriesCollection MyPie
    {
        get
        {
            return myPie;
        }
        set
        {
            myPie = value;
            RaisePropertyChanged("MyPie");
        }
    }

Code to process some user input (here based on class UserInput with property Value). The number of slices will equal the number of PieSeries you add to the SeriesCollection:

foreach(item in UserInput)
{
    MyPie.Add(new PieSeries { Values = new ChartValues<int> { item.Value }, DataLabels = true };
}

In your XAML, bind the SeriesCollection to a PieChart:

<lvc:PieChart Series="{Binding MyPie}"/>