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(); } } } |