Using Microsoft Chart in WPF

• Download sample - 9.8 KB
• Download source - 24.3 KB

Introduction

There is a paucity of articles on how to use the Microsoft Chart for Windows Forms in WPF applications. Furthermore, using chart to display "live" line charts is not very clearly documented or easily understood.

Typically, most chart controls are good enough to use for displaying a few thousand points. However, when the goal is to display even upto a few MILLION data points, most WPF compatible chart controls will choke.

Surprisingly, even many commercial chart controls tend to choke quickly on such enormous amounts of data.

However, Microsoft Chart control is one control which is both FREE and FAST. It can handle even a few million points without slowing down or crashing/messing up. However, one does need to configure it properly to support this.

Background

We will be using the WindowsFormsHost to host the Microsoft Chart control (which is essentially a Windows Forms control) inside our WPF application. In order to use this, we need to a reference to the WindowsFormsIntegration assembly in our Module_Graphs project.

To find out more about WindowsFormsHost, read the MSDN article about it here.

To ensure that our chart is able to quickly render huge number of points, we will be using the FastLine series type to draw our y/t curves. This is a very "light" type of graph curve, which doesn't come with all the bells and whistles which the more "heavy" graph curves like Line support, but it will more than do for most such applications.

Build Environment

This code has been tested and builds with both Visual Studio 2010 and Visual Studio 2013. It is targeting the .NET framework 4.0

Using the Code

Download the sample to run it and understand the various settings used to make a live y/t graph display on screen. The basic project structure is as follows.

YTGraphWPFTester: This is the sample application that adds the YTGraphWPFUC user control into its window to display live y/t curves. y/t essentially means that we are plotting some arbitrary data-points against time.

Module_Graphs: This is the user control project which hosts the MS-Chart within itself, and exposes simple functions and properties to help push data into it.

In the YTGraphWPFUC control, we have the following code:

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <Grid>
            <WindowsFormsHost x:Name="host" Height="300">
                <winformchart:Chart x:Name="chart1" Dock="Fill">
                    
                    <winformchart:Chart.Series>
                        <winformchart:Series Name="series" ChartType="Line" />
                    </winformchart:Chart.Series>
                    <winformchart:Chart.ChartAreas>
                        <winformchart:ChartArea />
                    </winformchart:Chart.ChartAreas>
                    <winformchart:Chart.Legends>
                        <winformchart:Legend BackColor="Transparent">
                        </winformchart:Legend>
                    </winformchart:Chart.Legends>
                </winformchart:Chart>
            </WindowsFormsHost>
        </Grid>
    </ScrollViewer>

We are creating a chart control within the WindowsFormsHost. To ensure that we have a line drawn, we add a Series to this chart, and also a Legends area wherein we can show the descriptive name for the chart series during runtime.

Finally, the main methods to understand are the CheckAndAddSeriesToGraph(), and AddPointToLine() methods.

These do the main job of inserting our "live" data to the graph and display it.

To simulate "live" data, we've got a DispatcherTimer which pushes randomly varying data into the graph in timer_Tick(). We use a random value to keep the data fluctuating visually. We can vary the density of points by increasing the timer Interval from say 10 milliseconds(0.01 seconds)  to 1000 milliseconds (1 second).

Points of Interest

While trying to incorporate a graph control into my project at work, I was surprised to note that even commercial graph libraries are very easy to choke, while a "Free" chart control like the extremely robust, but largely undocumented MS-Chart works wonders!

History

• 02-Jul-2015: Added basic example of how to use the MS-Chart
• 23-Jul-2015: Added Resize logic. Chart should now resize properly even when window is reduced in size.

This sample is free to use and or modify subject to The Code Project Open License (CPOL) 1.02 terms and conditions.

If you like this sample, and have used it in any way, please leave a vote for this tip, so that I know that my work is useful to others as well!