Edit this page

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:

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

Was this article helpful? Yes No

Give article feedback

Tell us how we can improve this article

Dummy