Rendering Charts in WPF Application using Visual Studio

Windows Presentation Foundation (WPF) is a graphical subsystem used to create desktop client applications (windows-based) with visually stunning user interface. WPF has a capability to provide consistent programming model for building applications.

The resolution-independent and vector-based rendering engine enables us to take advantage of modern graphics hardware. WPF extends the core with a comprehensive set of application-development features that include Extensible Application Markup Language (XAML).

This tutorial talks about how a chart can be rendered in WPF application using visual studio.

In WPF application, charts can be rendered using two different ways:

  • Rendering charts by generating HTML as string and pass it to the WebBrowser control.
  • Rendering charts by including FusionCharts ASP.NET server-side wrapper.

System Requirements

We need the following applications installed before rendering charts in WPF application using Visual Studio:

Method 1: Rendering Charts by Passing the HTML String to WebBrowser Control

Steps

1. Open Visual Studio. From the File menu, select New > Project.

New Project dialog box appears.

2. From Installed > Templates, select WPF Application and name the project as shown in the image below:

3. Creating a project by default opens Mainwindow.xaml and MainWindow.xaml.cs as shown below:

4. In MainWindow.xaml, drag and drop the label control and WebBrowser control from the Toolbox as shown below:

5. Select MainWindow.xaml and press f4 to open properties window. Select event button and double click the loaded event. Refer to the image below:

6. A code file with Grid_Loaded event handler opens as shown below:

7. The Grid_Loaded event handler pops up within MainWindow.xaml.cs as shown below:

8. Insert the code given below to Grid_loaded event handler:

9. Run the application. The output looks like as shown in the image below:

Method 2: Render Charts using FusionCharts ASP.NET wrapper

To create charts using FusionCharts ASP.NET server-side wrapper, follow steps 1 to 6 of Method 1 which will create the WPF application and webBrowser control. The additional steps are stated below:

Steps

1. Search for FusionCharts.dll in your local machine and add it into the project. Refer to the image below:

2. In MainWindow.xaml.cs, add FusionCharts namespace as shown below:

3. In Grid_Loaded event handler, add the code given below:

4. Run the application. The output looks like as shown in the image below:

If you find any difficulty in rendering the chart or you see any error in your code, click here to download the complete source code of the sample project we have created for this tutorial.

Was There a Problem Rendering the Charts?

In case something went wrong and you are unable to see the chart, check for the following:

  • The chart ID should be unique for all charts rendered on the same page. Otherwise, it will result in a JavaScript error.
  • If the chart does not show up at all, check if the fusioncharts.js and FusionCharts wrapper FusionCharts.java was loaded. Also, check if the path to the fusioncharts.js and the FusionCharts.java files is correct, and whether the files exist in that location.

Leave a Comment