New WPF Heatmap Chart

Based on a developers request we have added a heatmap series to our WPF Elements charting suite. This is convenient for rendering heatmap images with custom color palettes on a cartesian chart. The HeatmapSeries has extremely high performance capable of rendering tens of thousands of colored points with real-time animations and still allow for smooth zooming and panning.

heatmap

The heatmap series displays a grid of colored squares based on the data you provide. The first thing you need to do to use the heatmap series is to implement a simple data point model object. A single data point is a mapping between an X axis value and array of doubles that will be used to render a single column of squares. Here is a simple example:

  public class DateTimeHeatmapPoint
  {
    private DateTime _dateTime;
    private double[] _data;
 
    public DateTimeHeatmapPoint(DateTime dateTime, double[] data)
    {
      DateTime = dateTime;
      Data = data;
    }
 
    public DateTime DateTime
    {
      get { return _dateTime; }
      set
      {
        _dateTime = value;
      }
    }
 
    public double[] Data
    {
      get { return _data; }
      set
      {
        _data = value;
      }
    }
  }

The Data property provides the array of double values to plot up the Y axis, and the DateTime property is the X axis plotting value. You can use any value you want to plot against the X axis such as numbers, DateTimes, strings or other objects. Now you can create a collection filled with instances of your data point implementation and use it to set the ItemsSource property of the HeatmapSeries. Now that the data model related parts are done, let’s look at how to set up the chart in xaml:

  <ms:Chart>
    <ms:HeatmapSeries ItemsSource="{Binding Data}" XBinding="{Binding DateTime}" YBinding="{Binding Data}">
      <ms:HeatmapSeries.SeriesBrush>
        <LinearGradientBrush>
          <GradientStop Offset="0" Color="#3471C3" />
          <GradientStop Offset="50" Color="#FFF02F" />
          <GradientStop Offset="100" Color="#E10F15" />
        </LinearGradientBrush>
      </ms:HeatmapSeries.SeriesBrush>
    </ms:HeatmapSeries>
    <ms:Chart.XAxis>
      <ms:ChartAxis LabelFormat="{}{0:hh:mm}" />
    </ms:Chart.XAxis>
  </ms:Chart>

Here you can see the HeatmapSeries is used just like any of our other charts series. Simply add an instance of HeatmapSeries within the Chart tags and set the various options you need. Since we are using a custom data point implementation, make sure to set the XBinding and YBinding properties to point to the appropriate properties on the data point as seen above. One thing that is slightly different compared to other series is the usage of the SeriesBrush property. Here you can set any gradient brush to specify the spectrum of colors to render each square in the heatmap. You can have any number of gradient stops, and the numbers that you use for the offsets should correlate to the magnitude of the data you’ve added to the double arrays. The HeatmapSeries will interpolate this gradient brush to select a color for each point of data.

The heatmap series also supports missing data. If one of your data points returns a null array, there will be a blank column rendered at the data point. Or if a Double.NaN value is found in an array, that square of data will be skipped. You can set the HeatmapSeries.MissingColor property to specify a color to render missing data points.

You can download a demo of the HeatmapSeries from here. To run this, make sure to add a reference to your Mindscape.WpfElements.dll. Don’t have WPF Elements yet? Grab the free trial here.

If you have any questions about using the HeatmapSeries or any of our other WPF controls, we’d love to hear from you in the forum.

With all these cool new additions to WPF Elements over this past year, we’ll be rolling out version 7 soon so stay tuned!

Tagged as WPF Elements

6 Responses to “New WPF Heatmap Chart”

  • […] New WPF Heatmap Chart (Jason Fauchelle) […]

  • […] New Heatmap chart series – very high performance and supports missing data. […]

  • Hi Jason, great to see this!!!! How hard would it be to make the legend vertical? I’d like to put it on the right of the heatmap.

  • Hello Leah

    It is not too difficult to create a vertical heatmap legend. I’ve written a full explanation of how to do this on your post here: http://www.mindscapehq.com/forums/thread/1598692#1598984
    Please let me know if you need further help with this.

    -Jason Fauchelle

  • Hi Jason,

    Could you please provide an example of how to display a tooltip when the user clicks on (or hovers over) a point within the heatmap? I want the tooltip to display the x, y, and the color value.

    Thanks in advance.

  • Hello Andy

    To do this, I would recommend implementing a custom foreground element. You can see examples of custom foreground elements in the SampleExplorer app provided with WPF Elements. In particular, the SplineTracing demo in the Charts/feature category is a good one. The source code for the TrackingElement can be found in the SampleExplorer/Demos/Charts/Features folder. Basically, create a class that extends canvas, then when it loads, find the containing Chart control and hook into the various ChartMouse… events that you need. The event args will give you the pixel and logical position of the mouse within the chart plotting area. You can use the pixel position to place a custom element to display the values. And use the logical position to get the data values – this will be the coordinates within the heatmap image which you can use to lookup values in the heatmap data you provided. Getting the color may be a bit tricky, but doable. Then add an instance of your custom foreground element to the ForegroundElements collection of the Chart control. Try this out, and if you need further assistance you can post a question in the forum where I’ll help you out: http://www.mindscapehq.com/forums/forum/15

    Regards
    -Jason Fauchelle

  • Leave a Reply

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top