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.