Static And Dynamic Pie Chart In WPF With MVVM Pattern Using Prism Library

I hope, you have some knowledge of WPF and XAML before starting.

To know more about MVVM using Prism, follow- http://www.c-sharpcorner.com/article/getting-started-mvvm-pattern-using-prism-library-in-wpf/.

Before starting, I hope you added the ‘Prism.Unity’ from ‘NuGet Packages’  for charting. We will do the same for the charting controls package.

Note

In this article, I am using Visual Studio 2015.

Step 1

Create a project named ‘PrismMVVMTestProject’ of WPF Application.

Step 2

Right click on the project and select ‘Manage NuGet Packages.’

Step 3

1. For charting controls, type ‘System.Windows.Controls.DataVisualization ‘ in browse section, select the package and click Install button.
   
   
   

Afterwards, the package is installed successfully.

Now, you can see the newly added DLL's in the reference section of the project.

Step 4

It’s a better approach to create the 3 different folders in the project for Model, View and View model respectively.

Step 5

Create the pages in all the folders

1. Create a view named ‘TestView.xaml’ in the Views folder.




2. Create a Model named ‘TestModel.xaml’ in the Models folder.




3. Create a ViewModel named ‘TestViewModel.xaml’ in the ViewModels folder.

Step 6

Add the namespace named ‘Prism.MVVM’ in the TestModel page to inherit the class named ‘Bindable Base’.

1. Create a class for chart binding with key and value properties for Axis-X and Y.
   

   class Keyvalue : BindableBase
       {
           private string _Key;
           public string Key { get { return _Key; } set { SetProperty(ref _Key, value); } }
   
           private int _Value;
           public int Value { get { return _Value; } set { SetProperty(ref _Value, value); } }
       }

2. Create a list type property named DataList to store multiple values of keyvalue class

class TestModel : BindableBase
    {
        private List<Keyvalue> _DataList;
        public List<Keyvalue> DataList { get { return _DataList; } set { SetProperty(ref _DataList, value); } }
    }

Step 7

On the TetsView page,

1. Access the assembly of charting on the top of the view .
   

   xmlns:ChartToolKit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

2. Create 2 Group Boxes with the different header names for static and dynamic chart respectively, where the first will contain a chart with a Pie series with an item source , IndependentvaluePath and DependentvaluePath property.
   
   Note
   
   Here Itemsource property is bound with ‘DataList’ property, which we have created in TestModel class and for IndependentvaluePath & DependentvaluePath property, we use ‘Key’ and ‘Value’ of KeyValue class.
   
   
3. The 2nd GroupBox didn’t contain anything, as it just has a name.
   

   <Grid>
       <Grid.RowDefinitions>
           <RowDefinition></RowDefinition>
           <RowDefinition></RowDefinition>
       </Grid.RowDefinitions>
           <GroupBox Grid.Row="0" Header="Static Pie Chart">
           <ChartToolKit:Chart>
               <ChartToolKit:PieSeries ItemsSource="{Binding Path=TestModel.DataList,
               UpdateSourceTrigger=PropertyChanged,Mode=TwoWay, NotifyOnSourceUpdated=True }"
               IndependentValuePath="Key"
               DependentValuePath="Value">
               </ChartToolKit:PieSeries>
           </ChartToolKit:Chart>
       </GroupBox>
           <GroupBox  Grid.Row="1" Header="Dynamic Pie Chart" x:Name="GroupBoxDynamicChart">
       </GroupBox>
   </Grid>

Step 8

Add PrismMVVMTestProject.ViewModels namespace and bind Data Context of TestView page to the ViewModel named ‘TestViewModel’. and pass the 2^nd groupbox into it 

using System.Windows;
using PrismMVVMTestProject.ViewModels;
namespace PrismMVVMTestProject.Views
{
    /// <summary>
    /// Interaction logic for TestView.xaml
    /// </summary>
    public partial class TestView : Window
    {
        public TestView()
        {
            InitializeComponent();
            this.DataContext = new TestViewModel(GroupBoxDynamicChart);
        }
    }
}

Step 9

1. Add the namespace named ‘Prism.MVVM’ and ‘PrismMVVMTestProject.Models’ in the TestViewModel page, to inherit the class named ‘Bindable Base’, access TestModel in this page.
2. Create a property of TestModel class object, where ‘ref‘ parameter allows you to update its value.
3. Create a local list of Keyvalue class named ‘tempList’ and add some data into it.
   

   List<Keyvalue> tempList = new List<Keyvalue>();
               tempList.Add(new Keyvalue() { Key = "Rs.100", Value = 50 });
               tempList.Add(new Keyvalue() { Key = "Rs.500", Value = 18 });
               tempList.Add(new Keyvalue() { Key = "Rs.1000", Value = 25 });
               tempList.Add(new Keyvalue() { Key = "Rs.2000", Value = 5 });

4. Assign ‘tempList’ to ‘TestModel.DataList’ to bind Static chart.
   

   //Bind the sttaic Chart
   
   TestModel.DataList = tempList;

5. Create the dynamic chart and Pie series.
6. Bind the item source of Pie series with ‘tempList’.
7. To bind the IndependentvaluePath & DependentvaluePath property, we use ‘Key’ and ‘Value’ of KeyValue Class, which is similar in static chart.
8. Add the Pie series in to the chart and chart into the groupbox.
   

   //Create the Dynamic Chart, bind it and add it into the 2nd GroupBox
               Chart dynamicChart = new Chart();
               PieSeries pieSeries = new PieSeries();
               pieSeries.ItemsSource = tempList;
               pieSeries.DependentValuePath = "Value";
               pieSeries.IndependentValuePath = "Key";
               dynamicChart.Series.Add(pieSeries);
               GroupBoxDynamicChart.Content = dynamicChart;

Run the page and see the output.