Charting with WPF/C#


Visualization techniques have been evolving rapidly and with a growing trend towards ‘big data’ and ‘analytics’ there are so many technologies to choose from. If the development technology is not a constraint, D3 is arguably the best way to go, but if you are looking for some charting capabilities within a WPF/C# development environment your free choices are somewhat limited. Based on what I have tried out so far and read in various forums, here are some popular ones:

  1. MS Chart Controls – Pretty decent collection of controls, but you need to use ‘old’ Windows Forms to use these. You can host the Form within a WPF application if you really want.
  2. WPF Toolkit Charting Controls – I think this is the first real WPF charting control Microsoft released. Charting options are good, but they still look like the old Forms-based charts. Here is a good tutorial to get started.
  3. D3 1.0 – Pretty easy to get started, but I felt the number of options available was rather limited. First attempt to have D3 library capabilities in a WPF environment I think. There is a good tutorial here on how to get started with these charts. Seems like the WPF effort has somewhat been abandoned and there is more emphasis on having the D3 capabilities in Silverlight now which is called D3 2.0.
  4. Metro Charts – “This project provides a small library to display charts in Modern UI Style (formerly known as Metro) in WPF, Silverlight and Windows 8 applications”. This is the best I have seen so far and the UI looks much better and modern compared to all others. The trouble is, these are aimed towards Windows 8 applications and you need Visual Studio 2012 to run the sample code you get off the site. You still can get these to run on Windows 7 with Visual Studio 2010, and that’s what I’m going to focus on in this post.

– To get started, download the sample code from http://modernuicharts.codeplex.com/releases/view/106190 (if you don’t want to go through the steps yourself, just download the project

which contains all the changes I’m discussing here and you should be good to go! Just rename to a .zip – WordPress doesn’t allow me to upload zip files). You should have the following folders and files:

image

– Open the solution file. Permanently remove source control since we won’t be needing this.

image

– At this point you’ll get a bunch of errors starting from:

image

and your Solution Explorer will like this:

image

– Delete all projects except for the following three:

image

– Save the workspace and close Visual Studio

– Now, open Windows explorer and open the .csproj file in a text editor (like NotePad++) and change the ‘TargetFrameworkVersion’ from 4.5 to 4.0. You need to do this for the 3 files under De.TorstenMandelkow.MetroChart, De.TorstenMandelkow.MetroChart.WPF and TestApplicationWPF folders.

image

– If you want, you can clean up your folder a bit as well so that you have only the following on disk. This step is optional.

image

– Open the main solution (i.e., MetroChart.sln). Remove source control association bindings if a message pops up. You should see the following where the source code is now loaded into VS.

image

– Change startup project to TestApplicationWPF

image

– Hit F5, and you should see the following Smile

image

One of the things I wanted to do was find the underlying data when a user double clicks on a chart. To do this, you can add something like this in your xaml:

image

Then in your code behind, you can handle this event in whatever the way you want.

image

Play around. Using Metro Charts is fairly straight forward.

Advertisements
This entry was posted in General and tagged , , , , , , , , , . Bookmark the permalink.

9 Responses to Charting with WPF/C#

  1. Anonymous says:

    Thank you! That helped a lot!

  2. ste says:

    i have try to bind the itemssource of the chart to a BindingListCollectionViewSource but is not working or DataTable.DefaultView not working either.

  3. Anonymous says:

    great explanaition

  4. WPF Chart says:

    Have you found that most of these charts are quite slow? I was hoping to find an open source chart that can beat the performance of SciChart.

  5. Asia says:

    what files (.XAML and .CS) can be modified exactly !

  6. Asia says:

    Very goog…. I’m modifying generic.XAML of TestApplicationWPF and I don’t recognize his code behind (.cs) ?

  7. Asma Karmani says:

    Very goog…. I’m modifying generic.XAML of TestApplicationWPF and I don’t recognize his code behind (.cs) ?

  8. Asma Karmani says:

    Good job …… I’m modifiying generic.XAML of TestApplicationWPF so what’s exactly his code behind in .CS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s