Items Mapping in WPF HeatMap (SfHeatMap) control
29 Nov 20242 minutes to read
External data source can be mapped with HeatMap using ItemsMapping property. It supports 2 kind of data source.
- In
TableMapping rows represents an objects in collection, columns represents numerical properties of that object.
- In
CellMapping each cell represent an object in collection, this collection is grouped based on specific property to form as rows and columns.
Let us see the difference between two types of mapping. Following table represents two different data structure to represent the same HeatMap.
| CellMapping |
TableMapping |
C#
public class ProductInfo
{
public string ProductName { get; set; }
public int Year { get; set; }
public double Value { get; set; }
}
|
C#
public class ProductInfo
{
public string ProductName { get; set; }
public double Y2010 { get; set; }
public double Y2011 { get; set; }
public double Y2012 { get; set; }
public double Y2013 { get; set; }
public double Y2014 { get; set; }
public double Y2015 { get; set; }
}
|
|
Here, a single `ProductInfo` object represent a value for a particular product in a particular year
|
Here, a single `ProductInfo` object represents value for a particular product from year 2010 to 2015.
|
XAML
<syncfusion:CellMapping x:Key="CellMapping">
<syncfusion:CellMapping.Column>
<syncfusion:ColumnMapping
PropertyName="ProductName"
DisplayName="Product Name"/>
</syncfusion:CellMapping.Column>
<syncfusion:CellMapping.Row>
<syncfusion:ColumnMapping
PropertyName="Year"
DisplayName="Year"/>
</syncfusion:CellMapping.Row>
<syncfusion:CellMapping.Value>
<syncfusion:ColumnMapping
PropertyName="Value"/>
</syncfusion:CellMapping.Value>
</syncfusion:CellMapping>
|
XAML
<syncfusion:TableMapping x:Key="TableMapping">
<syncfusion:TableMapping.HeaderMapping>
<syncfusion:ColumnMapping
PropertyName="ProductName"
DisplayName="Product Name"/>
</syncfusion:TableMapping.HeaderMapping>
<syncfusion:TableMapping.ColumnMapping>
<syncfusion:ColumnMapping
PropertyName="Y2010"
DisplayName="2010"/>
<syncfusion:ColumnMapping
PropertyName="Y2011"
DisplayName="2011"/>
<syncfusion:ColumnMapping
PropertyName="Y2012"
DisplayName="2012"/>
<syncfusion:ColumnMapping
PropertyName="Y2013"
DisplayName="2013"/>
<syncfusion:ColumnMapping
PropertyName="Y2014"
DisplayName="2014"/>
<syncfusion:ColumnMapping
PropertyName="Y2015"
DisplayName="2015"/>
</syncfusion:TableMapping.ColumnMapping>
</syncfusion:TableMapping>
|
|
|