This WPF Chart example demonstrates how to create a real-time Heatmap using SciChart. Accepts a 2D Array of data and has a user-defined colour map which can be displayed as a legend over the chart.

Click and drag on the chart to see the animated-zoom performance while the heatmap is updating.

Documentation Links

– Heatmap API Documentation
– RenderableSeries API
– UniformHeatmapDataSeries class
– NonUniformHeatmapDataSeries class

// HeatMapExampleView.xaml

<UserControl x:Class="SciChart.Examples.Examples.HeatmapChartTypes.RealTimeHeatmap.HeatMapExampleView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
             Loaded="OnExampleLoaded"
             Unloaded="OnExampleUnloaded"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:ext="http://schemas.abtsoftware.co.uk/scichart/exampleExternals"
             d:DesignHeight="400"
             d:DesignWidth="600"
             mc:Ignorable="d">

    <UserControl.Resources>
        <s:GradientStopsToLinearGradientBrushConverter x:Key="ColorsToLinearGradientBrushConverter"/>

        <s:HeatmapColorPalette x:Key="ColorPalette" Maximum="200">
            <s:HeatmapColorPalette.GradientStops>
                <GradientStop Offset="0" Color="DarkBlue" />
                <GradientStop Offset="0.2" Color="CornflowerBlue" />
                <GradientStop Offset="0.4" Color="DarkGreen" />
                <GradientStop Offset="0.6" Color="Chartreuse" />
                <GradientStop Offset="0.8" Color="Yellow" />
                <GradientStop Offset="1" Color="Red" />
            </s:HeatmapColorPalette.GradientStops>
        </s:HeatmapColorPalette>

        <Style TargetType="TextBox">
            <Setter Property="MinWidth" Value="50"/>
            <Setter Property="Height" Value="16"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
        </Style>

        <Style TargetType="Label">
            <Setter Property="Foreground" Value="White"/>
        </Style>

    </UserControl.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <!-- The SciChartInteractionToolbar adds zoom, pan, zoom extents and rotate functionality -->
        <!-- to the chart and is included for example purposes. -->
        <!-- If you wish to know how to zoom and pan a chart then do a search for Zoom Pan in the Examples suite! -->
        <ext:SciChartInteractionToolbar TargetSurface="{Binding Source={x:Reference Name=sciChart}}">

            <ext:FlyoutMenuButton Content="TF" Padding="0" Style="{StaticResource FlyoutMenuButtonStyle}">
                <ext:FlyoutMenuButton.PopupContent>
                    <StackPanel MinWidth="150" Orientation="Vertical">
                        <TextBlock Text="Texture Filtering"/>
                        <CheckBox x:Name="textureSwitch"
                                  Margin="4"
                                  Content="UseLinearTextureFiltering"/>
                    </StackPanel>
                </ext:FlyoutMenuButton.PopupContent>
            </ext:FlyoutMenuButton>

            <ToggleButton x:Name="StartButton" Click="StartButton_Click" IsChecked="True" Style="{StaticResource PlayButtonStyle}" Padding="4"/>
            <ToggleButton x:Name="StopButton" Click="StopButton_Click" Style="{StaticResource StopButtonStyle}" Padding="7"/>

        </ext:SciChartInteractionToolbar>

        <s:SciChartSurface Grid.Column="1"
                           x:Name="sciChart"                  
                           Padding="0"
                           BorderThickness="0">

            <s:SciChartSurface.RenderableSeries>
                <s:FastUniformHeatmapRenderableSeries x:Name="heatmapSeries"
                                                      Opacity="0.9"
                                                      ColorMap="{StaticResource ColorPalette}"
                                                      UseLinearTextureFiltering="{Binding IsChecked, Mode=OneWay, Source={x:Reference Name=textureSwitch}}"/>
            </s:SciChartSurface.RenderableSeries>

            <s:SciChartSurface.XAxis>
                <s:NumericAxis DrawMajorBands="True" />
            </s:SciChartSurface.XAxis>

            <s:SciChartSurface.YAxis>
                <s:NumericAxis DrawMajorBands="True" />
            </s:SciChartSurface.YAxis>

            <s:SciChartSurface.ChartModifier>
                <s:ModifierGroup>
                    <s:RolloverModifier ShowTooltipOn="Always" UseInterpolation="True" ReceiveHandledEvents="True"/>
                    <s:RubberBandXyZoomModifier ExecuteOn="MouseLeftButton" />
                    <s:ZoomExtentsModifier ExecuteOn="MouseDoubleClick" />
                </s:ModifierGroup>
            </s:SciChartSurface.ChartModifier>
            
        </s:SciChartSurface>

        <s:HeatmapColorMap Grid.Column="1"
                           Margin="10,10,60,40" 
                           HorizontalAlignment="Right"
                           VerticalAlignment="Stretch"
                           Background="{Binding Source={x:Reference Name=sciChart}, Path=Background}"
                           Foreground="{Binding Source={x:Reference Name=sciChart}, Path=Foreground}"
                           ColorMap="{Binding Source={x:Reference Name=heatmapSeries}, Path=ColorMap.GradientStops, Converter={StaticResource ColorsToLinearGradientBrushConverter}}"
                           Minimum="{Binding Source={x:Reference Name=heatmapSeries}, Path=ColorMap.Minimum, Mode=TwoWay}"
                           Maximum="{Binding Source={x:Reference Name=heatmapSeries}, Path=ColorMap.Maximum, Mode=TwoWay}"
                           TextFormatting="0.00"
                           Opacity="0.8"
                           BorderBrush="#777"
                           BorderThickness="1"
                           Orientation="Vertical" />
    </Grid>
</UserControl>

// HeatMapExampleView.xaml.cs

// *************************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2022. All rights reserved.
//  
// Web: http://www.scichart.com
//   Support: support@scichart.com
//   Sales:   sales@scichart.com
// 
// HeatMapExampleView.xaml.cs is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use. 
// 
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied. 
// *************************************************************************************
using System;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Threading;
using SciChart.Charting.Model.DataSeries;
using SciChart.Charting.Model.DataSeries.Heatmap2DArrayDataSeries;
using SciChart.Charting.Visuals.RenderableSeries.Animations;

namespace SciChart.Examples.Examples.HeatmapChartTypes.RealTimeHeatmap
{
    /// <summary>
    /// demonstrates use of FastHeatmapRenderableSeries
    /// creates a list of Heatmap2dArrayDataSeries and displays them one by one in loop on timer
    /// </summary>
    public partial class HeatMapExampleView : UserControl
    {
        /// <summary>
        /// list of data series to be displayed in loop on timer
        /// </summary>
        private readonly IDataSeries[] _dataSeries = new IDataSeries[seriesPerPeriod];

        /// <summary>
        /// number of series to be displayed in a loop (period)
        /// </summary>
        private const int seriesPerPeriod = 30;

        private readonly DispatcherTimer _timer;

        private int _timerIndex = 0;

        public HeatMapExampleView()
        {
            InitializeComponent();

            var colormap = heatmapSeries.ColorMap;
            var cpMin = colormap.Minimum;
            var cpMax = colormap.Maximum;

            // Create data for our heatmaps in parallel
            Parallel.For(0, seriesPerPeriod, (i) =>
            {
                _dataSeries[i] = CreateSeries(i, 300, 200, cpMin, cpMax);
            });

            heatmapSeries.DataSeries = _dataSeries[0];

            _timer = new DispatcherTimer(DispatcherPriority.Render)
            {
                Interval = TimeSpan.FromMilliseconds(1),

                IsEnabled = SeriesAnimationBase.GlobalEnableAnimations
            };

            _timer.Tick += TimerOnTick;
        }

        /// <summary>
        /// displays next data series in list
        /// </summary>
        private void TimerOnTick(object sender, EventArgs eventArgs)
        {
            _timerIndex++;
            heatmapSeries.DataSeries = _dataSeries[_timerIndex % _dataSeries.Length];
        }

        private IDataSeries CreateSeries(int index, int width, int height, double cpMin, double cpMax)
        {
            var seed = SeriesAnimationBase.GlobalEnableAnimations ? (Environment.TickCount << index) : 0;
            var random = new Random(seed);
            
            double angle = Math.Round(Math.PI * 2 * index, 3) / seriesPerPeriod;
           
            int w = width, h = height;
            var data = new double[h, w];
            
            for (int x = 0; x < w; x++)
            { 
                for (int y = 0; y < h; y++)
                {
                    var v = (1 + Math.Round(Math.Sin(x * 0.04 + angle), 3)) * 50 + (1 + Math.Round(Math.Sin(y * 0.1 + angle), 3)) * 50 * (1 + Math.Round(Math.Sin(angle * 2), 3));
                    var cx = w / 2; var cy = h / 2;
                    var r = Math.Sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy));
                    var exp = Math.Max(0, 1 - r * 0.008);
                    var zValue = (v * exp + random.NextDouble() * 50);
                    data[y, x] = (zValue > cpMax) ? cpMax : zValue;
                }
            }
            return new UniformHeatmapDataSeries<int, int, double>(data, 0, 1, 0, 1);
        }

        private void OnExampleLoaded(object sender, RoutedEventArgs e)
        {
            if (SeriesAnimationBase.GlobalEnableAnimations)
            {
                _timer.Start();
            }
        }

        private void OnExampleUnloaded(object sender, RoutedEventArgs e)
        {
            _timer.Stop();
        }

        private void StartButton_Click(object sender, RoutedEventArgs e)
        {
            _timer.Start();

            StartButton.IsChecked = true;
            StopButton.IsChecked = false;
        }

        private void StopButton_Click(object sender, RoutedEventArgs e)
        {
            _timer.Stop();

            StartButton.IsChecked = false;
            StopButton.IsChecked = true;
        }
    }
}

< BACK TO ALL WPF CHART CHART EXAMPLES