Back to Devexpress

HeatmapRangeColorProvider.RangeStops Property

wpf-devexpress-dot-xpf-dot-charts-dot-heatmap-dot-heatmaprangecolorprovider.md

latest9.2 KB
Original Source

HeatmapRangeColorProvider.RangeStops Property

Returns the collection of color ranges for the heatmap range color provider.

Namespace : DevExpress.Xpf.Charts.Heatmap

Assembly : DevExpress.Xpf.Charts.v25.2.dll

NuGet Package : DevExpress.Wpf.Charts

Declaration

csharp
public HeatmapRangeStopCollection RangeStops { get; set; }
vb
Public Property RangeStops As HeatmapRangeStopCollection

Property Value

TypeDescription
HeatmapRangeStopCollection

A collection of color range boundaries.

|

Remarks

The RangeStops property allows you to specify color ranges. To do this, populate the RangeStops collection with HeatmapRangeStop objects. Specify the Value property for each range stop to define a color boundary. Set a range stop’s Type property to Percentage to define color ranges as percentages (in the [0..1] range). This can be helpful if the range of possible values is unknown.

Example

This example shows how to use arrays of string and numeric values to create a heatmap.

Follow the steps below to create a heatmap:

  1. Add the HeatmapControl to the project.

  2. Create a HeatmapMatrixAdapter object and assign it to the HeatmapControl.DataAdapter property.

  3. 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.

  4. Assign a two-dimensional array of double values to the adapter’s Values property.

  5. 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.

  6. Set the HeatmapControl.Legend property to a HeatmapLegend object to display a legend.

  7. Use the HeatmapControl.AxisX and HeatmapControl.AxisY properties to customize heatmap axes.

  8. To display cell labels, initialize the HeatmapControl.Label property with a HeatmapLabel object.

View Example

xaml
<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>
csharp
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 }
            };
        }
    }
}
vb
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

See Also

HeatmapRangeColorProvider Class

HeatmapRangeColorProvider Members

DevExpress.Xpf.Charts.Heatmap Namespace