How to Generate a Dynamic Seires Using a Collection of ViewModels

This topic demonstrates how to generate dynamic series that use a collection of view models as a context.

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.

   Example 1: Defining the model and viewmodel

           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 sample data for each one. Then set the created collection of view models as a Source of the ChartSeriesProvider.

   Example 2: Populating with data

       public sealed partial class MainPage : Page 
       { 
           Random r = new Random(); 
    
           public MainPage() 
           { 
               this.InitializeComponent(); 
    
               this.provider.Source = GenerateCollection(); 
           } 
    
           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(); 
                   collection.Add(vm); 
               } 
    
               return collection; 
           } 
       } 
   

3. Finally, create the chart using XAML. This sample uses the ItemsSourcePath property to set the path to the property of the view models.

   Example 1: Defining the model

       <Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart"> 
           <telerikChart:RadCartesianChart PaletteName="DefaultDark" > 
               <telerikChart:RadCartesianChart.HorizontalAxis> 
                   <telerikChart:CategoricalAxis/> 
               </telerikChart:RadCartesianChart.HorizontalAxis> 
               <telerikChart:RadCartesianChart.VerticalAxis> 
                   <telerikChart:LinearAxis/> 
               </telerikChart:RadCartesianChart.VerticalAxis> 
               <telerikChart:RadCartesianChart.SeriesProvider > 
                   <telerikChart:ChartSeriesProvider x:Name="provider"> 
                       <telerikChart:ChartSeriesProvider.SeriesDescriptors> 
                           <telerikChart:CategoricalSeriesDescriptor ItemsSourcePath="GetData" ValuePath="Value" CategoryPath="Category"> 
                               <telerikChart:CategoricalSeriesDescriptor.Style> 
                                   <Style TargetType="telerikChart:BarSeries"> 
                                       <Setter Property="CombineMode" Value="Cluster"/> 
                                   </Style> 
                               </telerikChart:CategoricalSeriesDescriptor.Style> 
                           </telerikChart:CategoricalSeriesDescriptor> 
                       </telerikChart:ChartSeriesProvider.SeriesDescriptors> 
                   </telerikChart:ChartSeriesProvider> 
               </telerikChart:RadCartesianChart.SeriesProvider> 
           </telerikChart:RadCartesianChart> 
       </Grid> 
   

   Figure 1: Result from Example 3