New to Telerik UI for WinUI? Download free 30-day trial

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.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(); 
                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.SeriesProvider > 
                    <telerikChart:ChartSeriesProvider x:Name="provider"> 
                            <telerikChart:CategoricalSeriesDescriptor ItemsSourcePath="GetData" ValuePath="Value" CategoryPath="Category"> 
                                    <Style TargetType="telerikChart:BarSeries"> 
                                        <Setter Property="CombineMode" Value="Cluster"/> 

    Figure 1: Result from Example 3

    Dynamic Series Using Collection View Models

In this article
Not finding the help you need?