wpf-devexpress-dot-xpf-dot-charts-dot-heatmap.md
Displays a customizable and interactive heatmap chart.
Namespace : DevExpress.Xpf.Charts.Heatmap
Assembly : DevExpress.Xpf.Charts.v25.2.dll
NuGet Package : DevExpress.Wpf.Charts
[DXLicenseWpf]
public class HeatmapControl :
Control,
IContainerElement,
IChartElement,
IOwnedElement,
INotificationOwner,
IWeakEventListener,
IDockTarget,
ISupportNavigationControl,
IAutoLayoutSupport,
IContainerLegendOptions,
IPrintableControl,
IPrintingTarget,
IChartsPrintableControl,
ISelectionSupportControl
<DXLicenseWpf>
Public Class HeatmapControl
Inherits Control
Implements IContainerElement,
IChartElement,
IOwnedElement,
INotificationOwner,
IWeakEventListener,
IDockTarget,
ISupportNavigationControl,
IAutoLayoutSupport,
IContainerLegendOptions,
IPrintableControl,
IPrintingTarget,
IChartsPrintableControl,
ISelectionSupportControl
A heatmap is a data analysis tool that uses colors and color intensity to visualize changes in magnitude. Each heatmap cell is defined by three values: X-argument, Y-argument, and Value (Color Value). The arguments are displayed along corresponding axes. The value is used to determine cell color.
The following image shows the main elements of a heatmap:
The Heatmap Control ships with a set of demo applications that you can explore in the DevExpress Demo Center:
Drag and drop the HeatmapControl component from the Visual Studio Toolbox onto the Window.
Visual Studio adds the <dxh:HeatmapControl/> tag and corresponding namespace mappings to the MainWindow’s markup:
<Window ...
xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
xmlns:dxh="http://schemas.devexpress.com/winfx/2008/xaml/heatmap"
...>
<Grid>
<dxh:HeatmapControl/>
</Grid>
</Window>
Depending on the project type, Visual Studio performs the following actions:
Adds the following assemblies to the project:
Installs the DevExpress.Wpf.Charts(25.2) NuGet package.
See also: .NET/.NET Core Support
The Heatmap Control uses data adapters to load data. Heatmap data adapters are derived from the HeatmapDataAdapterBase class. Use the Heatmap Control’s DataAdapter property to assign an adapter to a heatmap. The following adapters are available:
HeatmapDataSourceAdapterAllows you to bind the Heatmap Control to a data source.HeatmapMatrixAdapterAllows you to use collections of values to specify x-arguments and y-arguments, and pass a matrix of numbers to define heatmap cell values.
The Heatmap Control ships with multiple color providers that implement different coloring algorithms:
HeatmapKeyColorProviderApplies colors to heatmap cells based on color values that are used as key values (keys). Cells with equal keys have the same color.HeatmapRangeColorProviderApplies colors based on ranges to which cell values belong.HeatmapObjectColorProviderApplies a color to a cell that is stored in the Color Data Member.
To assign a color provider object to a heatmap, use the HeatmapControl.ColorProvider property.
You can add multiple titles to a heatmap. To do this, add Title objects to the Heatmap Control’s Titles collection and specify their Content properties.
<dxh:HeatmapControl ToolTipEnabled="True">
<dxh:HeatmapControl.Titles>
<dxc:Title Content="Balance of Trade" HorizontalAlignment="Center"/>
</dxh:HeatmapControl.Titles>
</dxh:HeatmapControl>
Initialize the HeatmapControl.Label property with a HeatmapLabel object to display cell labels.
Specify the HeatmapLabel.TextPattern property to format labels.
Use the AxisX and AxisY properties to access heatmap axis settings. The Heatmap Control includes the following axis options:
For more information about axis customization, refer to the following topic: HeatmapAxis.
To display a single legend for a heatmap, initialize the HeatmapControl.Legend property with a HeatmapLegend object.
Legend item content depends on the color provider assigned to the heatmap. For example, the Range Color Provider generates legend items that show value ranges. To format legend item content, use the color provider’s LegendItemPattern property.
Call the HeatmapControl.CalcHitInfo method to check what heatmap element is located in the test point. This method returns a HeatmapHitInfo object that contains information about the test point and heatmap element.
Enable the HeatmapControl.EnableAxisXNavigation and HeatmapControl.EnableAxisYNavigation properties to allow users to scroll and zoom a heatmap.
Set the HeatmapControl.ToolTipEnabled property to True to display tooltips when a user hovers over a heatmap cell.
Use the HeatmapControl.ToolTipOptions property to customize tooltip settings, such as the open mode or delay before a tooltip is shown. Specify the HeatmapToolTipOptions.Pattern property to format tooltip text.
A user can hover over a heatmap cell with the mouse cursor to highlight this cell. Specify the HeatmapControl.HighlightMode property to select an appropriate highlight mode.
Specify the heatmap SelectionMode property to choose a selection mode. The following modes are available: None, Single, Multiple, and Extended. To obtain selected items, use the SelectedItem and SelectedItems properties.
Use one of the methods below to print the Heatmap control:
The following methods allow you to export the Heatmap control to different formats:
The following code exports a heatmap to a PDF file:
<dxh:HeatmapControl x:Name="heatmap">
<dxh:HeatmapControl.PrintOptions>
<dxh:HeatmapPrintOptions SizeMode="ProportionalZoom" />
</dxh:HeatmapControl.PrintOptions>
</dxh:HeatmapControl>
using DevExpress.XtraPrinting;
private void SimpleButton_Click(object sender, RoutedEventArgs e) {
PdfExportOptions exportOptions = new PdfExportOptions();
exportOptions.ConvertImagesToJpeg = false;
exportOptions.DocumentOptions.Title = "Sales by Categories";
heatmap.ExportToPdf("D://heatmap-export.pdf", exportOptions);
}
Imports DevExpress.XtraPrinting
Private Sub SimpleButton_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
Dim exportOptions As PdfExportOptions = New PdfExportOptions()
exportOptions.ConvertImagesToJpeg = False
exportOptions.DocumentOptions.Title = "Sales by Categories"
heatmap.ExportToPdf("D://heatmap-export.pdf", exportOptions)
End Sub
This example shows how to use arrays of string and numeric values to create a heatmap.
Follow the steps below to create a heatmap:
Add the HeatmapControl to the project.
Create a HeatmapMatrixAdapter object and assign it to the HeatmapControl.DataAdapter property.
Use the adapter’s XArguments and YArguments properties to populate the heatmap with x- and y-arguments that are displayed along x- and y-axes.
Assign a two-dimensional array of double values to the adapter’s Values property.
Create a HeatmapRangeColorProvider object and assign it to the HeatmapControl.ColorProvider property. The Range Color Provider paints cells based on a value range to which the cell value belongs.
Set the HeatmapControl.Legend property to a HeatmapLegend object to display a legend.
Use the HeatmapControl.AxisX and HeatmapControl.AxisY properties to customize heatmap axes.
To display cell labels, initialize the HeatmapControl.Label property with a HeatmapLabel object.
<dx:ThemedWindow
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
xmlns:dxh="http://schemas.devexpress.com/winfx/2008/xaml/heatmap"
xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
xmlns:local="clr-namespace:HeatmapMatrixData"
x:Class="HeatmapMatrixData.MainWindow"
Title="Heatmap" Height="500" Width="800">
<Grid>
<dxh:HeatmapControl>
<dxh:HeatmapControl.DataContext>
<local:MatrixHeatmapViewModel/>
</dxh:HeatmapControl.DataContext>
<dxh:HeatmapControl.DataAdapter>
<dxh:HeatmapMatrixAdapter XArguments="{Binding XArguments}"
YArguments="{Binding YArguments}"
Values="{Binding Values}"/>
</dxh:HeatmapControl.DataAdapter>
<dxh:HeatmapControl.Titles>
<dxc:Title Content="Sales by Categories" HorizontalAlignment="Center"/>
</dxh:HeatmapControl.Titles>
<dxh:HeatmapControl.ColorProvider>
<dxh:HeatmapRangeColorProvider ApproximateColors="True"
LegendItemPattern="${V1}-{V2}K">
<dxh:HeatmapRangeColorProvider.Palette>
<dxc:CustomPalette>
<dxc:CustomPalette.Colors>
<Color>White</Color>
<Color>SkyBlue</Color>
<Color>DarkBlue</Color>
</dxc:CustomPalette.Colors>
</dxc:CustomPalette>
</dxh:HeatmapRangeColorProvider.Palette>
<dxh:HeatmapRangeColorProvider.RangeStops>
<dxh:HeatmapRangeStop Value="0" Type="Percentage"/>
<dxh:HeatmapRangeStop Value="200"/>
<dxh:HeatmapRangeStop Value="400"/>
<dxh:HeatmapRangeStop Value="600"/>
<dxh:HeatmapRangeStop Value="800"/>
<dxh:HeatmapRangeStop Value="1" Type="Percentage"/>
</dxh:HeatmapRangeColorProvider.RangeStops>
</dxh:HeatmapRangeColorProvider>
</dxh:HeatmapControl.ColorProvider>
<dxh:HeatmapControl.Legend>
<dxh:HeatmapLegend Margin="0, 0, 4, 10">
<dxh:HeatmapLegend.Title>
<dxc:LegendTitle Content="Revenue"/>
</dxh:HeatmapLegend.Title>
</dxh:HeatmapLegend>
</dxh:HeatmapControl.Legend>
<dxh:HeatmapControl.AxisX>
<dxh:HeatmapAxis>
<dxh:HeatmapAxis.Title>
<dxc:AxisTitle Content="Region"/>
</dxh:HeatmapAxis.Title>
</dxh:HeatmapAxis>
</dxh:HeatmapControl.AxisX>
<dxh:HeatmapControl.AxisY>
<dxh:HeatmapAxis Reverse="True">
<dxh:HeatmapAxis.Title>
<dxc:AxisTitle Content="Category"/>
</dxh:HeatmapAxis.Title>
</dxh:HeatmapAxis>
</dxh:HeatmapControl.AxisY>
<dxh:HeatmapControl.Label>
<dxh:HeatmapLabel Foreground="Black"
Background="#70ffffff"
Padding="2"/>
</dxh:HeatmapControl.Label>
</dxh:HeatmapControl>
</Grid>
</dx:ThemedWindow>
using DevExpress.Xpf.Core;
namespace HeatmapMatrixData {
public partial class MainWindow : ThemedWindow {
public MainWindow() {
InitializeComponent();
}
}
public class MatrixHeatmapViewModel {
public string[] XArguments { get; set; }
public string[] YArguments { get; set; }
public double[,] Values { get; set; }
public MatrixHeatmapViewModel() {
XArguments = new string[] { "North", "South", "West", "East", "Central" };
YArguments = new string[] { "Accessories", "Bikes", "Clothing", "Components" };
Values = new double[,] {
{ 214.3, 530.1, 630.2, 854.4, 313.4 },
{ 321.3, 514.4, 281.3, 533.4, 541.9 },
{ 604.3, 429.1, 632.6, 438.4, 265.4 },
{ 485.3, 544.7, 740.3, 661.4, 516.6 }
};
}
}
}
Imports DevExpress.Xpf.Core
Namespace HeatmapMatrixData
Public Partial Class MainWindow
Inherits ThemedWindow
Public Sub New()
Me.InitializeComponent()
End Sub
End Class
Public Class MatrixHeatmapViewModel
Public Property XArguments As String()
Public Property YArguments As String()
Public Property Values As Double(,)
Public Sub New()
XArguments = New String() {"North", "South", "West", "East", "Central"}
YArguments = New String() {"Accessories", "Bikes", "Clothing", "Components"}
Values = New Double(,) {{214.3, 530.1, 630.2, 854.4, 313.4}, {321.3, 514.4, 281.3, 533.4, 541.9}, {604.3, 429.1, 632.6, 438.4, 265.4}, {485.3, 544.7, 740.3, 661.4, 516.6}}
End Sub
End Class
End Namespace
The following example shows how to create a heatmap and bind it to a data source. In this example, the heatmap obtains data from an XML file.
Add the HeatmapControl to the project.
Create a HeatmapDataSourceAdapter object and assign it to the HeatmapControl.DataAdapter property.
Define the adapter’s DataSource property.
Use the ColorDataMember property to define a data member that is used to determine cell colors.
Specify the following adapter properties to define data members that store heatmap arguments:
Create a HeatmapRangeColorProvider object and assign it to the HeatmapControl.ColorProvider property. The Range Color Provider paints cells based on a value range to which the cell value belongs.
To display cell labels, initialize the HeatmapControl.Label property with a HeatmapLabel object.
Set the HeatmapControl.Legend property to a HeatmapLegend object to add a legend to the heatmap.
Set the HeatmapControl.ToolTipEnabled property to true to enable tooltips. Specify the HeatmapToolTipOptions.Pattern property to define tooltip text display format.
Use the HeatmapControl.AxisX and HeatmapControl.AxisY properties to customize heatmap axes.
<dx:ThemedWindow
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
xmlns:dxh="http://schemas.devexpress.com/winfx/2008/xaml/heatmap"
xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
x:Class="HeatmapDataSource.MainWindow"
Title="Heatmap Control" Height="500" Width="800">
<Grid>
<dxh:HeatmapControl ToolTipEnabled="True">
<dxh:HeatmapControl.ToolTipOptions>
<dxh:HeatmapToolTipOptions Pattern="X: {X}
Y: {Y}" />
</dxh:HeatmapControl.ToolTipOptions>
<dxh:HeatmapControl.Titles>
<dxc:Title Content="Balance of Trade" HorizontalAlignment="Center"/>
</dxh:HeatmapControl.Titles>
<dxh:HeatmapControl.DataAdapter>
<dxh:HeatmapDataSourceAdapter
DataSource="{Binding}"
XArgumentDataMember="Country"
YArgumentDataMember="Product"
ColorDataMember="Value"/>
</dxh:HeatmapControl.DataAdapter>
<dxh:HeatmapControl.ColorProvider>
<dxh:HeatmapRangeColorProvider ApproximateColors="true"
LegendItemPattern="{}{VP1:0%} - {VP2:0%}">
<dxh:HeatmapRangeColorProvider.Palette>
<dxc:CustomPalette>
<dxc:CustomPalette.Colors>
<Color>Red</Color>
<Color>White</Color>
<Color>Green</Color>
</dxc:CustomPalette.Colors>
</dxc:CustomPalette>
</dxh:HeatmapRangeColorProvider.Palette>
<dxh:HeatmapRangeColorProvider.RangeStops>
<dxh:HeatmapRangeStop Value="0" Type="Percentage"/>
<dxh:HeatmapRangeStop Value="-10"/>
<dxh:HeatmapRangeStop Value="-2.5"/>
<dxh:HeatmapRangeStop Value="0"/>
<dxh:HeatmapRangeStop Value="2.5"/>
<dxh:HeatmapRangeStop Value="10"/>
<dxh:HeatmapRangeStop Value="1" Type="Percentage"/>
</dxh:HeatmapRangeColorProvider.RangeStops>
</dxh:HeatmapRangeColorProvider>
</dxh:HeatmapControl.ColorProvider>
<dxh:HeatmapControl.Label>
<dxh:HeatmapLabel FontSize="8"/>
</dxh:HeatmapControl.Label>
<dxh:HeatmapControl.Legend>
<dxh:HeatmapLegend/>
</dxh:HeatmapControl.Legend>
<dxh:HeatmapControl.AxisX>
<dxh:HeatmapAxis AutoGrid="False"
GridSpacing="1">
<dxh:HeatmapAxis.Label>
<dxc:AxisLabel Angle="30"/>
</dxh:HeatmapAxis.Label>
</dxh:HeatmapAxis>
</dxh:HeatmapControl.AxisX>
<dxh:HeatmapControl.AxisY>
<dxh:HeatmapAxis/>
</dxh:HeatmapControl.AxisY>
</dxh:HeatmapControl>
</Grid>
</dx:ThemedWindow>
using DevExpress.Xpf.Core;
using System;
using System.Data;
using System.IO;
using System.Windows;
using System.Xml;
using System.Xml.Linq;
namespace HeatmapDataSource {
public partial class MainWindow : ThemedWindow {
public MainWindow() {
InitializeComponent();
DataContext = DataLoader.CreateDataSet("/Data/BalanceOfTrade.xml");
}
}
public static class DataLoader {
static Stream GetStream(string fileName) {
Uri uri = new Uri(fileName, UriKind.RelativeOrAbsolute);
return Application.GetResourceStream(uri).Stream;
}
public static XDocument LoadXDocumentFromResources(string fileName) {
try {
return XDocument.Load(GetStream(fileName));
} catch {
return null;
}
}
public static XmlDocument LoadXmlDocumentFromResources(string fileName) {
XmlDocument document = new XmlDocument();
try {
document.Load(GetStream(fileName));
return document;
} catch {
return null;
}
}
public static DataTable CreateDataSet(string fileName) {
if (!string.IsNullOrWhiteSpace(fileName)) {
DataSet dataSet = new DataSet();
dataSet.ReadXml(GetStream(fileName));
if (dataSet.Tables.Count > 0)
return dataSet.Tables[0];
}
return null;
}
}
}
Imports DevExpress.Xpf.Core
Imports System
Imports System.Data
Imports System.IO
Imports System.Windows
Imports System.Xml
Imports System.Xml.Linq
Namespace HeatmapDataSource
Public Partial Class MainWindow
Inherits ThemedWindow
Public Sub New()
Me.InitializeComponent()
DataContext = CreateDataSet("/Data/BalanceOfTrade.xml")
End Sub
End Class
Public Module DataLoader
Private Function GetStream(ByVal fileName As String) As Stream
Dim uri As Uri = New Uri(fileName, UriKind.RelativeOrAbsolute)
Return Application.GetResourceStream(uri).Stream
End Function
Public Function LoadXDocumentFromResources(ByVal fileName As String) As XDocument
Try
Return XDocument.Load(GetStream(fileName))
Catch
Return Nothing
End Try
End Function
Public Function LoadXmlDocumentFromResources(ByVal fileName As String) As XmlDocument
Dim document As XmlDocument = New XmlDocument()
Try
document.Load(GetStream(fileName))
Return document
Catch
Return Nothing
End Try
End Function
Public Function CreateDataSet(ByVal fileName As String) As DataTable
If Not String.IsNullOrWhiteSpace(fileName) Then
Dim dataSet As DataSet = New DataSet()
dataSet.ReadXml(GetStream(fileName))
If dataSet.Tables.Count > 0 Then Return dataSet.Tables(0)
End If
Return Nothing
End Function
End Module
End Namespace
The XML file structure looks as follows:
Show XML
<?xml version="1.0" standalone="yes"?>
<BalanceOfTrade xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="Item">
<xs:complexType>
<xs:sequence>
<xs:element name="Country" type="xs:string"/>
<xs:element name="Product" type="xs:string"/>
<xs:element name="Value" type="xs:double"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
<Item>
<Country>China</Country>
<Product>Computer</Product>
<Value>-151.9</Value>
</Item>
<Item>
<Country>China</Country>
<Product>Oil, Gas, Minerals</Product>
<Value>1.9</Value>
</Item>
<Item>
<Country>China</Country>
<Product>Transportation</Product>
<Value>10.9</Value>
</Item>
<Item>
<Country>China</Country>
<Product>Apparel</Product>
<Value>-56.3</Value>
</Item>
<!--...-->
</BalanceOfTrade>
Object DispatcherObject DependencyObject Visual UIElement FrameworkElement Control HeatmapControl
See Also