Click here to Skip to main content
15,389,797 members
Articles / Desktop Programming / WPF
Tip/Trick
Posted 2 Jul 2015

Stats

58.3K views
5.5K downloads
24 bookmarked

Using Microsoft Chart in WPF

Rate me:
Please Sign up or sign in to vote.
5.00/5 (15 votes)
2 Jul 2015CPOL3 min read
Sample project to host MS-Chart in your WPF application

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.

Image 1

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:

XML
<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!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Bharat Mallapur
Technical Lead
India India
No Biography provided

Comments and Discussions

 
PraisePerfect for my projet as a beginner in C# thanks a lot Pin
Thomas Perraton24-Apr-20 5:04
MemberThomas Perraton24-Apr-20 5:04 
QuestionThanks! Pin
R Horton21-May-17 8:56
MemberR Horton21-May-17 8:56 
PraiseAbsolutely Helpful Pin
Renny H.Park17-Apr-17 15:11
MemberRenny H.Park17-Apr-17 15:11 
PraiseWorks Great for Larger Datasets Pin
Member 1260107123-Jun-16 14:15
MemberMember 1260107123-Jun-16 14:15 
GeneralRe: Works Great for Larger Datasets Pin
Bharat Mallapur13-Jan-17 1:54
MemberBharat Mallapur13-Jan-17 1:54 
GeneralRe: Works Great for Larger Datasets Pin
Member 1345350012-Aug-19 5:48
MemberMember 1345350012-Aug-19 5:48 
QuestionUsing Microsoft Chart in WPF Pin
manoappapillai15-Aug-15 14:18
Membermanoappapillai15-Aug-15 14:18 
AnswerRe: Using Microsoft Chart in WPF Pin
Bharat Mallapur15-Aug-15 17:32
MemberBharat Mallapur15-Aug-15 17:32 
GeneralMy vote of 5 Pin
tooooomasz22-Jul-15 2:53
Membertooooomasz22-Jul-15 2:53 
GeneralRe: My vote of 5 Pin
Bharat Mallapur23-Jul-15 3:11
MemberBharat Mallapur23-Jul-15 3:11 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.