Populating With Data

This article demonstrates how the RadHeatmap control can be populated with data.

Setting up the Model and ViewModel

In order to demonstrate how to populate a RadHeatMap with data, we will create a sample object that will hold temperature information and a viewmodel that will hold a collection of those objects.

Example 1: Setting up the model and viewmodel

• C#
• VB.NET

public class TempInfo 
{ 
    public DateTime Year { get; set; } 
    public string Month { get; set; } 
    public double Temperature { get; set; } 
    public double Rain { get; set; } 
} 
 
public class ViewModel 
{ 
    private ObservableCollection<TempInfo> tempInfos; 
 
    public ObservableCollection<TempInfo> TempInfos 
    { 
        get 
        { 
            if(this.tempInfos == null) 
            { 
                this.tempInfos = this.GenerateTempInfos(); 
            } 
 
            return this.tempInfos; 
        } 
    } 
 
    private ObservableCollection<TempInfo> GenerateTempInfos() 
    { 
        DateTime date = DateTime.Today; 
        var infos = new ObservableCollection<TempInfo>() 
        { 
            new TempInfo() { Year = date, Month = "Apr", Temperature = 17, Rain = 8.8}, 
            new TempInfo() { Year = date, Month = "May", Temperature = 20, Rain = 6.25}, 
 
            new TempInfo() { Year = date.AddYears(1), Month = "Jan", Temperature = 5, Rain=10.3}, 
            new TempInfo() { Year = date.AddYears(1), Month = "Feb", Temperature = 13, Rain = 9.8}, 
            new TempInfo() { Year = date.AddYears(1), Month = "Mar", Temperature = 21, Rain = 9.6}, 
 
            new TempInfo() { Year = date.AddYears(2), Month = "Jan", Temperature = 14, Rain = 11.5}, 
            new TempInfo() { Year = date.AddYears(2), Month = "Feb", Temperature = 19, Rain = 7.5}, 
            new TempInfo() { Year = date.AddYears(2), Month = "Mar", Temperature = 17, Rain = 10.1}, 
        }; 
 
        return infos; 
    } 
} 

Public Class TempInfo 
    Public Property Year() As Date 
    Public Property Month() As String 
    Public Property Temperature() As Double 
    Public Property Rain() As Double 
End Class 
 
Public Class ViewModel 
    Private _tempInfos As ObservableCollection(Of TempInfo) 
 
    Public ReadOnly Property TempInfos() As ObservableCollection(Of TempInfo) 
        Get 
            If Me._tempInfos Is Nothing Then 
                Me._tempInfos = Me.GenerateTempInfos() 
            End If 
 
            Return Me._tempInfos 
        End Get 
    End Property 
 
    Private Function GenerateTempInfos() As ObservableCollection(Of TempInfo) 
        Dim [date] As Date = Date.Today 
        Dim infos = New ObservableCollection(Of TempInfo)() From { 
            New TempInfo() With { 
                .Year = [date], 
                .Month = "Apr", 
                .Temperature = 17, 
                .Rain = 8.8 
            }, 
            New TempInfo() With { 
                .Year = [date], 
                .Month = "May", 
                .Temperature = 20, 
                .Rain = 6.25 
            }, 
            New TempInfo() With { 
                .Year = [date].AddYears(1), 
                .Month = "Jan", 
                .Temperature = 5, 
                .Rain=10.3 
            }, 
            New TempInfo() With { 
                .Year = [date].AddYears(1), 
                .Month = "Feb", 
                .Temperature = 13, 
                .Rain = 9.8 
            }, 
            New TempInfo() With { 
                .Year = [date].AddYears(1), 
                .Month = "Mar", 
                .Temperature = 21, 
                .Rain = 9.6 
            }, 
            New TempInfo() With { 
                .Year = [date].AddYears(2), 
                .Month = "Jan", 
                .Temperature = 14, 
                .Rain = 11.5 
            }, 
            New TempInfo() With { 
                .Year = [date].AddYears(2), 
                .Month = "Feb", 
                .Temperature = 19, 
                .Rain = 7.5 
            }, 
            New TempInfo() With { 
                .Year = [date].AddYears(2), 
                .Month = "Mar", 
                .Temperature = 17, 
                .Rain = 10.1 
            } 
        } 
 
        Return infos 
    End Function 
End Class 

Categorical definition

In order to visualize our data we need to set the Definition property of the control. Example 2 demonstrates how to set it to a CategoricalDefinition.

Example 2: Setting the Definition to a CategoricalDefinition

• XAML

<Grid> 
    <Grid.DataContext> 
        <local:ViewModel /> 
    </Grid.DataContext> 
 
    <telerik:RadHeatMap ShowToolTips="True" 
                        Height="300"> 
        <telerik:RadHeatMap.Definition> 
            <telerik:CategoricalDefinition ItemsSource="{Binding TempInfos}" 
                                           RowGroupMemberPath="Year" 
                                           ColumnGroupMemberPath="Month" 
                                           ValuePath="Temperature" /> 
        </telerik:RadHeatMap.Definition> 
        <telerik:RadHeatMap.RowHeaderSettings> 
            <telerik:HeatMapRowHeaderSettings LabelFormat="yyyy"/> 
        </telerik:RadHeatMap.RowHeaderSettings> 
    </telerik:RadHeatMap> 
</Grid> 

Figure 1: RadHeatMap with CategoricalDefinition

Vertical definition

Alternatively, we can also use a VerticalDefinition. We'll set the months as HeaderPath of our HeatMap. Thus the months supplied by the Month property of our underlying source will be visualized as column headers. For each row we'll display the Temperature and Rain values of the corresponding month.

Example 3: Setting the Definition to a VerticalDefinition

• XAML

<Grid> 
    <Grid.DataContext> 
        <local:ViewModel /> 
    </Grid.DataContext> 
    <Grid.Resources> 
        <telerik:HeatMapValueGradientColorizer x:Key="myColorizer"> 
            <GradientStop Offset="0" Color="#D9E7F1" /> 
            <GradientStop Offset="1" Color="#01518C" /> 
        </telerik:HeatMapValueGradientColorizer> 
    </Grid.Resources> 
 
    <telerik:RadHeatMap ShowToolTips="True" 
                        Height="300" 
                        CellBorderColor="DarkGray" 
                        CellBorderThickness="1"> 
        <telerik:RadHeatMap.Definition> 
            <telerik:VerticalDefinition ItemsSource="{Binding TempInfos}" 
                                        HeaderPath="Month"> 
                <telerik:VerticalDefinition.MemberMappings> 
                    <telerik:MemberMapping Header="Temperature in Celsius" 
                                           ValuePath="Temperature"/> 
                    <telerik:MemberMapping Header="Rain in Centimeters" 
                                           ValuePath="Rain" 
                                           Colorizer="{StaticResource myColorizer}"/> 
                </telerik:VerticalDefinition.MemberMappings> 
            </telerik:VerticalDefinition> 
        </telerik:RadHeatMap.Definition> 
    </telerik:RadHeatMap> 
</Grid>      

You can use the same code to declare a HorizontalDefinition.

Figure 2: RadHeatMap with VerticalDefinition

Find a runnable project of the previous example in the WPF Samples GitHub repository.