populating-with-data.md

title	page_title	description	slug	tags	published	position
Populating With Data	Populating With Data	This article demonstrates how to populate the RadHeatMap with data.	radheatmap-populating-with-data	populating,with,data	true	3

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.

[C#] Example 1: Setting up the model and viewmodel

{{region cs-radheatmap-populating-with-data_0}} 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;
    }
}

{{endregion}}

[VB.NET] Example 1: Setting up the model and viewmodel

{{region vb-radheatmap-populating-with-data_1}} 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

{{endregion}}

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.

[XAML] Example 2: Setting the Definition to a CategoricalDefinition

{{region xaml-radheatmap-populating-with-data_2}} <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>

{{endregion}}

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.

[XAML] Example 3: Setting the Definition to a VerticalDefinition

{{region xaml-radheatmap-populating-with-data_3}} <Grid.DataContext> <local:ViewModel /> </Grid.DataContext> <Grid.Resources> <telerik:HeatMapValueGradientColorizer x:Key="myColorizer"> </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>		

{{endregion}}

tip You can use the same code to declare a HorizontalDefinition.

Figure 2: RadHeatMap with VerticalDefinition

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

See Also

• [Getting Started]({%slug radheatmap-getting-started%})
• [Colorizers]({%slug radheatmap-colorizers%})