Available for: Windows 8.1 | Windows Phone 8.1

How to Generate a Dynamic Seires Using a Collection of ViewModels

The following example demonstrates how to generate dynamic series that use a collection of view models as a context.

Dynamic Series Using Collection View Models

  1. Create a class that represents a single DataPoint and also a ViewModel class with a property to hold the collection of DataPoints for each series.

    public class Data
        public double Value { get; set; }
        public string Category { get; set; }
    public class ViewModel
        public List<Data> GetData { get; set; }
  2. Create two methods to help us create a collection of view models and create sample data for each one.

    public List<Data> GenerateData()
        List<Data> data = new List<Data>();
        data.Add(new Data { Category = "Apple", Value = r.Next(1, 20) });
        data.Add(new Data { Category = "Orange", Value = r.Next(10, 30) });
        data.Add(new Data { Category = "Lemon", Value = r.Next(20, 40) });
        return data;
    public List<ViewModel> GenerateCollection()
        List<ViewModel> collection = new List<ViewModel>();
        for (int i = 0; i < 5; i++)
            ViewModel vm = new ViewModel();
            vm.GetData = GenerateData();
        return collection;

    Here r is a random number.

    Random r = new Random();
  3. Set the created collection of view models as a Source of the ChartSeriesProvider.

    this.provider.Source = GenerateCollection();
  4. Finally, create the chart using XAML. This sample uses the ItemsSourcePath property to set the path to the property of the view models.

    <telerikChart:RadCartesianChart PaletteName="DefaultDark" >
        <telerikChart:RadCartesianChart.SeriesProvider >
            <telerikChart:ChartSeriesProvider x:Name="provider">
                    <telerikChart:CategoricalSeriesDescriptor ItemsSourcePath="GetData" ValuePath="Value" CategoryPath="Category">
                            <Style TargetType="telerikChart:BarSeries">
                                <Setter Property="CombineMode" Value="Cluster"/>