Hierarchical View

The RadChart control displays drill down data in a hierarchical manner. In order to define the different level of the drill down hierarchy you have to use the HierachicalViewDescriptors property of the RadChart control. It is a collection which contains ChartHierarchicalViewDescriptor objects. The ChartHierarchicalViewDescriptor object is used to define a hierarchy level. The level of the descriptor in the hierarchy depends on the position it has in the collection.

For example if you have 3 descriptors in the HierachicalViewDescriptors collection, the first one will be the main chart or the first level of hierarchy, the second one will be one level below and the third will be the last in the hierarchy.

In order to use a selector you simply have to create an instance of it. If it is the first level of the hierarchy you only have to define its SeriesMappings. If its below the first level, you have to define its Relation property, in order to specify the relation between it and its parent descriptor.

Here is an example of a data with two levels of hierarchy. The data contains the following classes:

public class Company 
{ 
    public string Name 
    { 
        get; 
        set; 
    } 
    public ModelSalesCollection Sales 
    { 
        get; 
        set; 
    } 
} 

Public Class Company 
    Public Property Name() As String 
    Public Property Sales() As ModelSalesCollection 
End Class 

public class ModelSalesCollection : List<ModelSales> 
{ 
    public double TotalAmount 
    { 
        get 
        { 
            return this.Sum( modelSales => modelSales.Amount ); 
        } 
    } 
} 

Public Class ModelSalesCollection 
    Inherits List(Of ModelSales) 
    Public ReadOnly Property TotalAmount() As Double 
        Get 
            Return Me.Sum(Function(modelSales) modelSales.Amount) 
        End Get 
    End Property 
End Class 

The Sum() extension method is available via the System.Linq namespace.

public class ModelSales 
{ 
    public string Model 
    { 
        get; 
        set; 
    } 
    public double Amount 
    { 
        get; 
        set; 
    } 
    public ModelSales( string model, double amount ) 
    { 
        this.Model = model; 
        this.Amount = amount; 
    } 
} 

Public Class ModelSales 
    Public Property Model() As String 
    Public Property Amount() As Double 
    Public Sub New(ByVal model As String, ByVal amount As Double) 
        Me.Model = model 
        Me.Amount = amount 
    End Sub 
End Class 

Here is a method that generates some sample data for you.

private List<Company> GetChartData() 
{ 
    return new List<Company>() {  
        new Company() {  
            Name="ToyYoda", 
            Sales = new ModelSalesCollection() {  
                new ModelSales("Coolla", 120000), 
                new ModelSales("Coolla", 115000), 
                new ModelSales("Veso", 89000), 
                new ModelSales("Veso", 79000) 
            } 
        }, 
        new Company() {  
            Name="Marda", 
            Sales =new ModelSalesCollection() { 
                new ModelSales("Tree", 145000), 
                new ModelSales("Tree", 132000), 
                new ModelSales("Six", 121000), 
                new ModelSales("Six", 111000) 
            } 
        } 
    }; 
} 

Private Function GetChartData() As List(Of Company) 
    Return New List(Of Company)() From { _ 
        New Company() With { _ 
            .Name = "ToyYoda", _ 
            .Sales = New ModelSalesCollection() From { _ 
                New ModelSales("Coolla", 120000), _ 
                New ModelSales("Coolla", 115000), _ 
                New ModelSales("Veso", 89000), _ 
                New ModelSales("Veso", 79000) _ 
            } _ 
        }, _ 
        New Company() With { _ 
            .Name = "Marda", _ 
            .Sales = New ModelSalesCollection() From { _ 
                New ModelSales("Tree", 145000), _ 
                New ModelSales("Tree", 132000), _ 
                New ModelSales("Six", 121000), _ 
                New ModelSales("Six", 111000) _ 
            } _ 
        } _ 
    } 
End Function 

At the first level of the hierarchy the RadChart should display the value of the TotalAmount for each company.

<telerik:RadChart x:Name="radChart"> 
    <telerik:RadChart.HierarchicalViewDescriptors> 
        <telerik:ChartHierarchicalViewDescriptor> 
            <telerik:ChartHierarchicalViewDescriptor.SeriesMappings> 
                <telerik:SeriesMapping> 
                    <telerik:ItemMapping DataPointMember="YValue" FieldName="Sales.TotalAmount" /> 
                    <telerik:ItemMapping DataPointMember="XCategory" FieldName="Name" /> 
                </telerik:SeriesMapping> 
            </telerik:ChartHierarchicalViewDescriptor.SeriesMappings> 
        </telerik:ChartHierarchicalViewDescriptor> 
    </telerik:RadChart.HierarchicalViewDescriptors> 
</telerik:RadChart> 

Upon clicking on the respective company, the RadChart should visualize the Amount__for each model. The next __ChartHierarchicalViewDescriptor should be related to the Sales property of the clicked parent item.

<telerik:RadChart> 
    <telerik:RadChart.HierarchicalViewDescriptors> 
        <telerik:ChartHierarchicalViewDescriptor> 
            <telerik:ChartHierarchicalViewDescriptor.SeriesMappings> 
                <telerik:SeriesMapping> 
                    <telerik:ItemMapping DataPointMember="YValue" FieldName="Sales.TotalAmount" /> 
                    <telerik:ItemMapping DataPointMember="XCategory" FieldName="Name" /> 
                </telerik:SeriesMapping> 
            </telerik:ChartHierarchicalViewDescriptor.SeriesMappings> 
        </telerik:ChartHierarchicalViewDescriptor> 
        <telerik:ChartHierarchicalViewDescriptor> 
            <telerik:ChartHierarchicalViewDescriptor.Relation> 
                <telerik:PropertyRelation ParentPropertyName="Sales" /> 
            </telerik:ChartHierarchicalViewDescriptor.Relation> 
            <telerik:ChartHierarchicalViewDescriptor.SeriesMappings> 
                <telerik:SeriesMapping> 
                    <telerik:SeriesMapping.GroupingSettings> 
                        <telerik:GroupingSettings ShouldFlattenSeries="True"> 
                            <telerik:ChartGroupDescriptor Member="Model" /> 
                        </telerik:GroupingSettings> 
                    </telerik:SeriesMapping.GroupingSettings> 
                    <telerik:ItemMapping AggregateFunction="Sum" 
                                         DataPointMember="YValue" 
                                         FieldName="Amount" /> 
                    <telerik:ItemMapping DataPointMember="XCategory" FieldName="Model" /> 
                </telerik:SeriesMapping> 
            </telerik:ChartHierarchicalViewDescriptor.SeriesMappings> 
        </telerik:ChartHierarchicalViewDescriptor> 
    </telerik:RadChart.HierarchicalViewDescriptors> 
</telerik:RadChart> 

To see how to use the drill down in different scenarios read the following topics:

• Drill Down in a Single Chart Area

• Drill Down in Multiple Chart Areas

To learn how to navigate between levels read the Navigation topic.