Skip to main content Skip to footer

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

MESCIUS inc.

comments powered by Disqus