New to Telerik UI for WinUI? Download free 30-day trial

Data Population

To populate the HeatMap with data, you have to first set up the Model and ViewModel, and then configure the vertical or categorical definition.

Setting Up the Model and ViewModel

The following example demonstrates how to create a sample object to hold temperature information, and a ViewModel that holds a collection of those objects.

Set up the Model and ViewModel

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 = "Jan", Temperature = 17, Rain = 8.8}, 
            new TempInfo() { Year = date, Month = "Feb", Temperature = 20, Rain = 6.25}, 
            new TempInfo() { Year = date, Month = "Mar", Temperature = 18, Rain = 7.4}, 
 
            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; 
    } 
} 

Categorical Definition

To visualize the data, you need to set the Definition property of the HeatMap. The following example demonstrates how to set it to a CategoricalDefinition.

Configure the definition to a CategoricalDefinition

<Grid> 
    <Grid.DataContext> 
        <local:ViewModel /> 
    </Grid.DataContext> 
 
    <telerik:RadHeatMap 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> 
A HeatMap with a CategoricalDefinition

RadHeatMap with CategoricalDefinition

Vertical Definition

Alternatively, you can also use a VerticalDefinition.

The following example demonstrates how to set the months as the HeaderPath of the HeatMap. Thus, the months supplied by the Month property of the underlying source, will be visualized as column headers. For each row, you'll display the Temperature and Rain values of the corresponding month. You can also use the same code to declare a HorizontalDefinition.

Configure the definition to a VerticalDefinition

<Grid> 
    <Grid.DataContext> 
        <local:ViewModel /> 
    </Grid.DataContext> 
    <Grid.Resources> 
        <telerik:HeatMapValueGradientColorizer x:Key="RainColorizer"> 
            <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 RainColorizer}"/> 
                </telerik:VerticalDefinition.MemberMappings> 
            </telerik:VerticalDefinition> 
        </telerik:RadHeatMap.Definition> 
    </telerik:RadHeatMap> 
</Grid>      

A HeatMap with a VerticalDefinition

RadHeatMap with VerticalDefinition

For a runnable project, refer to the WPF Samples GitHub repository.

See Also

In this article
Not finding the help you need?