Nevron .NET Vision
Chart for .NET / User's Guide / Chart Types / Heat Map / Triangulated Heat Map
In This Topic
    Triangulated Heat Map
    In This Topic

    The triangulated heat map is a type of chart which represents a set of points with three values (X, Y and Z) as a heat map. The input set is used to build a triangulation map which can be filled using a specified palette. The following images show a triangulated heat map:

     

     Creating a Triangulated Heat Map

    You create a triangulated heat map series by creating an instance of the NTriangulatedHeatMapSeries class and then adding it to the series collection of the chart. The following code shows how to create a triangulated heat map series and add it to the chart:

    C#
    Copy Code

    // get the cartesian chart created by default
    NChart chart = nChartControl1.Charts[0];

    // create a triangulated heat map series
    NTriangulatedHeatMapSeries heatMap = new NTriangulatedHeatMapSeries();

    chart.Series.Add(heatMap);

    Visual Basic
    Copy Code

    ' get the cartesian chart created by default
    Dim chart As NChart = NChartControl1.Charts(0)

    ' create a triangulated heat map series
    Dim heatMap As New NTriangulatedHeatMapSeries()

    chart.Series.Add(heatMap)

     Adding Data
           

    Once the Triangulated Heat Map series is created you can add some data in it. Triangulated Heat Map series use the Values data series for y (elevation) values, the XValues data series - for x position values and the YValues data series for y position values. You should add at least three distinct points in order to display a heatmap.

    C#
    Copy Code

    // add some dummy data (pyramid in this case)
    heatMap.Values.Add(0);
    heatMap.XValues.Add(0);
    heatMap.YValues.Add(0);

    heatMap.Values.Add(0);
    heatMap.XValues.Add(1);
    heatMap.YValues.Add(0);

    heatMap.Values.Add(0);
    heatMap.XValues.Add(1);
    heatMap.YValues.Add(1);

    heatMap.Values.Add(0);
    heatMap.XValues.Add(0);
    heatMap.YValues.Add(1);

    heatMap.Values.Add(1);
    heatMap.XValues.Add(0.5);
    heatMap.YValues.Add(0.5);

    Visual Basic
    Copy Code

    ' add some dummy data (pyramid in this case)
    heatMap.Values.Add(0)
    heatMap.XValues.Add(0)
    heatMap.YValues.Add(0)

    heatMap.Values.Add(0)
    heatMap.XValues.Add(1)
    heatMap.YValues.Add(0)

    heatMap.Values.Add(0)
    heatMap.XValues.Add(1)
    heatMap.YValues.Add(1)

    heatMap.Values.Add(0)
    heatMap.XValues.Add(0)
    heatMap.YValues.Add(1)

    heatMap.Values.Add(1)
    heatMap.XValues.Add(0.5)
    heatMap.YValues.Add(0.5)

     Heat Map Palette

    The color assigned to each heat map vertex (xyz point ) is computed using the palette assigned to the triangulated heat map series, which is accessible from the Palette property. The following code shows how to create a simple custom palette which maps the values from 0 to 10 to shades of gray, where 0 is mapped to black and 10 to white:

    C#
    Copy Code

    heatMap.Palette.Mode = PaletteMode.Custom;

    heatMap.Palette.Clear();

    heatMap.Palette.SmoothPalette = true;

    heatMap.Palette.Add(0, Color.Black);

    heatMap.Palette.Add(10, Color.White);

    Visual Basic
    Copy Code

    heatMap.Palette.Mode = PaletteMode.Custom

    heatMap.Palette.Clear()

    heatMap.Palette.SmoothPalette = True

    heatMap.Palette.Add(0, Color.Black)

    heatMap.Palette.Add(10, Color.White)

    The double.NaN value is always mapped to transparent color. This allows you to define holes or missing values in the heat map grid.
     Contour Lines

    The triangulated heat map series has the ability to show contour lines. In order to show contour lines for different value levels you need to first assign a proper palette - usually this is a palette in custom mode like in the above code examples.

    Then you need to enable contour lines using the ContourDisplayMode property:

    C#
    Copy Code

    heatMapSeries.ContourDisplayMode = ContourDisplayMode.Contour;

    Visual Basic
    Copy Code

    heatMapSeries.ContourDisplayMode = ContourDisplayMode.Contour

    The following table shows the available options:

    ContourDisplayMode Description
    None Contour lines are not shown. This is the default.
    Contour Displays the connected contours.
    Dots Displays the contour points as dots. The dot size is controlled from the ContourDotSize property.

    When contour lines are visible you can also control their stroke and color. This is achieved from the ContourStroke and ContourColorMode properties. The latter accepts values from the ENContourColorMode enum:

    ENContourColorMode Description
    Uniform The contours are displayed with stroke style taken from the ControurStrokeStyle property.
    Palette The contours are displayed with stroke taken from the ControurStroke property and color taken from the associated palette for the controur level.

     

     Contour Labels

    The triangulated heat map series can display labels at the contour lines that show their value. The contour labels functionality is controlled from the ContourLabelStyle property of the control. The following code shows how to enable contour labels:

    C#
    Copy Code
    heatMap.ContourLabelStyle.Visible = true;
    Visual Basic
    Copy Code
    heatMap.ContourLabelStyle.Visible = True

    In addition you can modify other parameters of the controur labels such as whether they should clip the contour, whether to allow flipping, their formatting and others. The following code snippet shows how to modify several commonly used contour label properties:

    C#
    Copy Code

    heatMap.ContourLabelStyle.Visible = true;
    heatMap.ContourLabelStyle.AllowLabelToFlip = false;
    heatMap.ContourLabelStyle.LabelDistance = new NLength(50);
    heatMap.ContourLabelStyle.Format = "<value>";
    heatMap.ContourLabelStyle.TextStyle.FillStyle = new NColorFillStyle(Color.Red);

    Visual Basic
    Copy Code
    heatMap.ContourLabelStyle.Visible = True
    heatMap.ContourLabelStyle.AllowLabelToFlip = False
    heatMap.ContourLabelStyle.LabelDistance = New NLength(50)
    heatMap.ContourLabelStyle.Format = "<value>"
    heatMap.ContourLabelStyle.TextStyle.FillStyle = New NColorFillStyle(Color.Red)
     Heat Map Legend

    As with all series the heat map has an associated legend. It provides special treatment for the SeriesLegendMode.SeriesLogic legend mode. When set in this mode the heat map can display information about the coloring in table or gradient axis legend mode. For example:

    C#
    Copy Code

    heatMap.Legend.Mode = SeriesLegendMode.SeriesLogic;

    heatMap.Legend.PaletteLegendMode = PaletteLegendMode.GradientAxis;

    heatMap.Legend.PaletteScaleStepMode = PaletteScaleStepMode.SynchronizeWithScaleConfigurator;

    Visual Basic
    Copy Code

    heatMap.Legend.Mode = SeriesLegendMode.SeriesLogic;

    heatMap.Legend.PaletteLegendMode = PaletteLegendMode.GradientAxis;

    heatMap.Legend.PaletteScaleStepMode = PaletteScaleStepMode.SynchronizeWithScaleConfigurator;

     Related Examples

    Windows forms: Chart Gallery\Triangulated Heat Map\

    Wpf: Chart Gallery\Triangulated Heat Map\

    Web Forms: Chart Gallery\Triangulated Heat Map\

     

    See Also