Realtime graph for WPF

You know the Task Manager’s CPU Usage History graph that shows CPU utilization over time? Try that type of the graph in WPF and you’ll realize that it isn’t as easy as it should be due to the WPF’s performance for real time graphs. Which sucks due to the way WPF works. Even with 3rd party you’ll have hard time to find a graph fast enough to cope with even more than few hundred samples.

Hence I’ve decide to build my own real time graph. It is based on Direct2D because Direct2D is much faster when it comes to presenting the graphical result. However, merging Direct2D into WPF is, again, not an easy task as it should be (hint to MS – there should be native WPF support for hosting Direct2D output). Anyway, I found the article Using Direct2D with WPF on CodePlex. It comes with sources which I use. Those sources require Windows API CodePack(WACP), a bug ridden set of managed API’s to various, otherwise unsupported, features (MS went with this approach (if it works, it works, if it doesn’t fix it by yourself) instead of providing an official support). The WACP binaries I provide are compiled from 1.1. sources with some bug fixed regarding DirectCompute.

Here is a snapshot from a graph showing a sinusoide as a product of many samples (the attached example contains required code and binaries).

I utilize a combination of Direct2D and samples optimization which yields smooth result even with million and more samples.

Required code

Create a class that implements IGraphItem interface. This class will hold a single sample through Time and Value property. Time typically represents a time elapsed since the start and it is expressed in millisecond while Value is a double and holds whatever value.

public class RealtimeGraphItem : IGraphItem
{    
    public int Time { get; set; }
    public double Value { get; set; }
}

Configure RealtimeGraphControl like

xmlns:rg="clr-namespace:Righthand.RealtimeGraph;assembly=Righthand.RealtimeGraph"
...
<rg:RealtimeGraphControl x:Name="Graph" AxisColor="Blue" AxisWidth="1"      VerticalLinesInterval="5" VerticalLabelsStep="2"  SpanX="100"
      MaxY="250" MinY="50"  HorizontalLinesInterval="10"/>

where SpanX is time span expressed in seconds telling the graph how many seconds are shown.

Finally create a BindingList<RealtimeGraphItem> source and bind it to Graph.SeriesSource property (BindingList is required as it has the event ListChanged that is used to trigger rendering update of the graph). And that’s it. When you add new items to the source the graph will automatically reflects the new state.

Requirements

.net 4.0

Dowload

Attached are binaries and the sources for the Example project.

Let me know what you think.

RealtimeGraph_1_0.zip (1.31 mb)