Using C1Chart with MVVM

C1Chart for WPF can be used with the MVVM design pattern. The concept applied is the same as you would use for other data-aware controls. The ViewModel should expose the collection and binding properties and all these can easily be set in XAML of the Chart view. In this article I will walk you through the basic steps to bind the chart in MVVM pattern. Let’s start by creating a new WPF application. Add the following Sales class to the project.

public  class Sales  
    {  
      public Sales(string product,double salevalue)  
      {  
          _product = product;  
          _salevalue = salevalue;  
      }  
        #region privateFields  
      string _product;  
      double _salevalue;  
        #endregion  
        #region publicProperties  
      public string Product  
      {  
          get { return _product; }  
          set { _product = value; }  
      }  
      public double SaleValue  
      {  
          get { return _salevalue; }  
          set { _salevalue = value; }  
      }  
        #endregion  
    }  

Next we will create ViewModelBase class which our SalesViewModel will inherit from. The base view model implements the INotifyPropertyChanged interface.

public class ViewModelBase:INotifyPropertyChanged  
{  
#region INotifyPropertyChanged Members  

public event PropertyChangedEventHandler PropertyChanged;  

#endregion  
public ViewModelBase()  
{  
}  
protected void OnPropertyChanged(string property)  
{  
if (PropertyChanged != null)  
{  
PropertyChanged(this, new PropertyChangedEventArgs(property));  
}  
}  
}  

Now let’s create the ChartViewModel.

public class ChartViewModel:ViewModelBase  
{  
#region Ctor..  
public ChartViewModel()  
{  
_saleslist = new ObservableCollection<Sales>();  
LoadData();  

}  
#endregion  
#region private Fields  
ObservableCollection<Sales> _saleslist;  
#endregion  
#region publicProperties  
public ObservableCollection<Sales> SalesList  
{  
get { return _saleslist; }  
set { _saleslist = value; OnPropertyChanged("SalesList");}  
}  
#endregion  
#region privateMethods  
void LoadData()  
{  
_saleslist.Add(new Sales("Confectionaries", 2500));  
_saleslist.Add(new Sales("Plastics", 3500));  
_saleslist.Add(new Sales("Electronics", 7500));  
_saleslist.Add(new Sales("Produces", 800));  
}  
#endregion  
}  

In this class we simply create a SalesList collection and load data to it. Next drop a C1Chart on the MainWindow. Add the name space for the ViewModel as below. xmlns:local="clr-namespace:C1ChartMVVMSample.ViewModel" Create a Resource as below for the ChartViewModel.

<Window.Resources>  
    <local:ChartViewModel x:Key="vm"/>  
</Window.Resources>  

Set the datacontext of the control which has the Chart such as:

DataContext="{StaticResource vm}"  

Set the datacontext of the chart such as:

DataContext="{Binding Path=SalesList}"  

Set ChartData ItemNameBinding to the product field of the Sales class such as below:

ItemNameBinding="{Binding Path=Product}"  

Set chart's DataSeries ValueBinding to the SaleValue field of the Sales class:

ValueBinding="{Binding Path=SaleValue}"  

That’s all we need to do. The complete XAML for MainWindow is below:

<Window x:Class="C1ChartMVVMSample.MainWindow"  
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
     Title="MainWindow" Height="350" Width="525"  
     xmlns:loacl="clr-namespace:C1ChartMVVMSample.ViewModel"  
     xmlns:c1chart="http://schemas.componentone.com/xaml/c1chart">  
     <Window.Resources>  
          <loacl:ChartViewModel x:Key="vm"/>  
     </Window.Resources>  
     <Grid DataContext="{StaticResource vm}">  
          <c1chart:C1Chart Height="256" HorizontalAlignment="Left" Margin="22,26,0,0" Name="c1Chart1" VerticalAlignment="Top" Width="469" DataContext="{Binding Path=SalesList}" Theme="{DynamicResource {ComponentResourceKey ResourceId=MediaPlayer, TypeInTargetAssembly=c1chart:C1Chart}}">  
               <c1chart:C1Chart.Data>  
                    <c1chart:ChartData ItemNameBinding="{Binding Path=Product}">  
                         <c1chart:DataSeries Label="Product" ValueBinding="{Binding Path=SaleValue}" ItemsSource="{Binding}" />  

                    </c1chart:ChartData>  
               </c1chart:C1Chart.Data>  
               <c1chart:C1ChartLegend DockPanel.Dock="Right" />  
          </c1chart:C1Chart>  
     </Grid>  
</Window>  

Since we load the data collection in our ViewModel's constructor, the data will be visible in the chart at design time. You can download this sample below. Download Sample