# 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**

```C#
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**

```XAML
<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**

![WinUI RadHeatMap RadHeatMap with CategoricalDefinition](https://www.telerik.com/winui/documentation/assets/1fb59ab0566181c6f1121293ddaa849a/radheatmap_databinding_01.png)

## 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**

```XAML
<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**

![WinUI RadHeatMap RadHeatMap with VerticalDefinition](https://www.telerik.com/winui/documentation/assets/2bff6a6e56bdf0613a8c5d9e8e9fddb4/radheatmap_databinding_02.png)

> tip For a runnable project, refer to the [WPF Samples GitHub repository](https://github.com/telerik/xaml-sdk/tree/master/HeatMap/WPF/PopulatingWithData).

## See Also

* [Getting Started with the Telerik UI for WinUI HeatMap](https://www.telerik.com/winui/documentation/controls/radbadge/getting-started)
* [Telerik UI for WinUI Demos](https://demos.telerik.com/winui/)