Using Series Provider

This topic demonstrates how to use the ChartSeriesProvider to generate series dynamically.

At the end of the tutorial you will see a result similar to the following:

Using Collection of Series View Models

This example shows how to bind the Source property of the series provider to a collection of view model describing the chart series.

Defining the model and viewmodel

    public class DataPointModel 
    { 
        public double Value { get; set; }                
        public string Category { get; set; } 
    } 
 
    public class SeriesModel 
    { 
        public List<DataPointModel> GetData { get; set; } 
    } 

Populating with data

public partial class MainPage : Page 
{ 
    private static Random r = new Random(0); 
 
    public MainPage() 
    { 
        this.InitializeComponent(); 
        this.provider.Source = GenerateSeriesModels(); 
    } 
 
    public List<DataPointModel> GenerateDataPointModels() 
    { 
        List<DataPointModel> data = new List<DataPointModel>(); 
        data.Add(new DataPointModel { Category = "Apple", Value = r.Next(1, 20) }); 
        data.Add(new DataPointModel { Category = "Orange", Value = r.Next(10, 30) }); 
        data.Add(new DataPointModel { Category = "Lemon", Value = r.Next(20, 40) }); 
        return data; 
    } 
 
    public List<SeriesModel> GenerateSeriesModels() 
    { 
        List<SeriesModel> collection = new List<SeriesModel>(); 
        for (int i = 0; i < 5; i++) 
        { 
            SeriesModel vm = new SeriesModel(); 
            vm.GetData = GenerateDataPointModels(); 
            collection.Add(vm); 
        } 
        return collection; 
    } 
} 

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> 

Using Collection of Collections

This example shows how to create a collection containing collections of data point view models. The parent collection is bound to the Source of the series provider. For each child collection a new chart series is created and the collection items are used to generate chart data points.

Defining the model

public class DataPointModel 
{ 
    public double Value { get; set; }    
    public string Category { get; set; } 
} 

Populating with data

private static Random r = new Random(0); 
 
public MainPage() 
{ 
    this.InitializeComponent(); 
    List<List<DataPointModel>> collection = new List<List<DataPointModel>>(); 
    for (int i = 0; i < 5; i++) 
    { 
        List<DataPointModel> data = new List<DataPointModel>(); 
        data.Add(new DataPointModel { Category = "Apple", Value = r.Next(1, 20) }); 
        data.Add(new DataPointModel { Category = "Orange", Value = r.Next(1, 20) }); 
        data.Add(new DataPointModel { Category = "Lemon", Value = r.Next(1, 20) }); 
        collection.Add(data); 
    } 
    provider.Source = collection; 
 
} 

Defining the RadCartesianChart and the ChartSeriesProvider

<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 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>