ComponentOne Chart for WPF and Silverlight
Chart for WPF and Silverlight / Chart Features / Series Generation / Automatic Series Generation with MVVM
In This Topic
    Automatic Series Generation with MVVM
    In This Topic

    This topic assumes that you have created a new Visual Studio project and added the appropriate references to your project.

    Step 1) Create the Markup

    This is the XAML markup that will get your started:

    XAML
    Copy Code
    <c1:C1Chart Name="c1Chart1">
        <c1:C1Chart.Data>
            <c1:ChartData SeriesItemsSource="{Binding SeriesDataCollection}">
             <c1:ChartData.SeriesItemTemplate>
                    <DataTemplate>
                        <c1:DataSeries Label="{Binding Year}" ValuesSource="{Binding Values}" />
                  </DataTemplate>
        </c1:ChartData.SeriesItemTemplate>
            </c1:ChartData>
        </c1:C1Chart.Data>
        <c1:C1ChartLegend DockPanel.Dock="Right" />
    </c1:C1Chart>
    

    Note that the SeriesItemsSource and SeriesItemTemplate are set on the ChartData object, and are bound values.

     

    Step 2) Create the View Model

    Next, you need to create the ViewModel for your project.

     Add the following code to your code file to create the View Model:

    C#
    Copy Code
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.ComponentModel;
    using System.Collections.ObjectModel;
    
    namespace ChartAutomaticSeries
    {
        public static class ViewModelData
        {
            public static int NUM_SERIES = 5;
            public static int NUM_POINTS = 8;
    
            public static Random Rnd = new Random();
    
            private static ChartModelData _data;
    
            public static ChartModelData ChartData
            {
                get
                {
                    if (_data == null)
                    {
                        _data = new ChartModelData();
                    }
                    return _data;
                }
            }
        }
    
        public class ChartModelData
        {
            public ObservableCollection<SeriesData> SeriesDataCollection
            {
                get
                {
                    if (_seriesDataCollection == null)
                    {
                        _seriesDataCollection = new ObservableCollection<SeriesData>();
                        for (int i = 0; i < ViewModelData.NUM_SERIES; i++)
                            _seriesDataCollection.Add(new SeriesData(2010 + i));
                    }
                    return _seriesDataCollection;
                }
            }
            private ObservableCollection<SeriesData> _seriesDataCollection;
        }
    
        public class SeriesData : INotifyPropertyChanged
        {
            int _year;
            double[] _values;
    
            public SeriesData(int year)
            {
                _year = year;
    
                _values = new double[ViewModelData.NUM_POINTS];
                for (int i = 0; i < ViewModelData.NUM_POINTS; i++)
                    _values[i] = ViewModelData.Rnd.Next(0, 100);
            }
    
            public int Year
            {
                get { return _year; }
                set
                {
                    if (_year != value)
                    {
                        _year = value;
                        OnPropertyChanged("Year");
                    }
                }
            }
    
            public double[] Values
            {
                get { return _values; }
                set
                {
                    if (_values != value)
                    {
                        _values = value;
                        OnPropertyChanged("Values");
                    }
                }
            }
    
            #region INotifyPropertyChanged Members
    
            public event PropertyChangedEventHandler PropertyChanged;
    
            private void OnPropertyChanged(string propertyName)
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                }
            }
    
            #endregion
        }
    }
    

    Step 3) Adding Code

    Switch back to your MainWindow.xaml file. Right-click the page and select View Code from the context menu.

    Edit the existing code so that it resembles the following:

    C#
    Copy Code
    public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
    
                this.DataContext = new ChartModelData();
            }
        }
    }
    

    See Also