Chart Automatic Series Generation (MVVM)

The C1Chart control got several new enhancements in the 2012 v3 release. One of the new features introduced is automatic series generation. Two new properties on the ChartData object now enable the number of data series to be automatically generated based upon the model. This is a useful feature for developers using MVVM as now the number of series can be completely generated in the View Model. The two new properties are:

• Chart.Data.SeriesItemsSource – the collection of series.
• Chart.Data.SeriesItemTemplate – the template used to display each series

A common scenario is plotting a different data series for each year where the number of years is unknown at design-time. In this example we need the number of years to be determined in the View Model. Here is an example of using the two new properties in XAML.

<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 new properties are on the ChartData element. The SeriesItemTemplate is defined using a DataSeries element with the Label and ValuesSource bound to the specific fields found in the source. The SeriesItemsSource is bound to a property on the View Model, SeriesDataCollection, just like any other MVVM example. Below are some snippets from the View Model.

public ObservableCollection<SeriesData> SeriesDataCollection { … }

The collection is of type SeriesData. This is our custom business object that contains the Year and Value data.

public class SeriesData : INotifyPropertyChanged  
{  
    public int Year { … }  
    public double[] Values { … }  
}

You can download the complete sample (WPF) below. This feature is also supported in Silverlight, Windows Phone and WinRT XAML. Download Sample ChartAutomaticSeries_WPF Download the latest version of C1Chart