Integrating a fast WPF chart featuring zooming, panning in your Windows Forms application

Kiril Matev / Tuesday, April 20, 2010

Can you provide your users with rich data-analysis capabilities, including zooming, panning, rich styling, when working with large volumes of data and real-time data feeds? Now you can. Using XamDataChart, the one of the many powerful visualization components in the NetAdvantage® for WPF DataVisualization suite, you can totally change the way your users view data. The NetAdvantage® for WPF DataVisualization suite will be officially released in mid-June.

Iif you’re working in the tried-and-true Windows Forms world, you might feel as if the action’s passing you by. Well, this is where this article comes in. It provides you, Windows Forms developers, with a guide and a sample application demonstrating how to provide amazing data-analysis capabilities by hosting the powerful new XamDataChart in your Windows Forms application.

This article is organized in two parts. First you get a brief bird's-eye view of the application and how you can interact with it, and then we will look at the code hosting and databinding the XamDataChart.

Application description

In the application, the XamDataChart to data, generated by code in the Windows Forms project, giving you an idea how easily you can integrate the XamDataChart into your existing Winforms applications. The application also gives you a rich way of interacting with the XamDataChart – you’ll be able to specify the amount of data the chart is bound to, start a real-time data feed, and control chart appearance.

How do I interact with the sample?

Once you run the sample, you’ll be able to zoom in by drawing a rectangle in the chart data area, using the mouse wheel, or by resizing the scrollbars of the XamDataChart. Start the data feed, and drag both trackbars to their minimum values to see the real-time performance of the XamDataChart. You can then set the left trackbar (window size) to its maximum value and click the Fill Window button in order to fill the specified number of data points. This will show you how to chart performs handling 50,000 values (for the three series combined, that's 150,000 data points!). With the data feed still adding values to the dataset, you can zoom a few times on the right side of the chart area in order to get a more detailed view of the values being added.

Databinding Settings

You can control the data bound to the chart as follows:

Add data items one by one using the “Add Item”button
Start/stop a data feed using the “Start data feed” button
Fill the entire chart with data in one go using the “Fill window”button

The left trackbar allows you to set the window size, controlling how many items are shown in the chart at a time.

The right trackbar allows you to set the time interval (in milliseconds) between consecutive data items, which controls how fast data items get added to the datasource, once the data feed is activated. Set it to the minimum value possible to see the real-time data performance of the XamDataChart.

Styling Settings

Apart from rich databinding capabilities, the sample application allows you to control the styling properties of the hosted XamDataChart. You can control series visibility using the checkboxes in the top-left corner, and the chart marker type using the drop-down button.

Code walkthrough

Let's now take a look at the sample application code. It contains a solution with a Windows Forms project which supplies the UI and the data, and a WPF project defining the control hosting the XamDataChart.

The XamDataChartControl project is a WPF User Control project defines the XamDataChartHostControl user control, which contains the XamDataChart. The relevant code is in the XamDataChartControl.xaml file:

The XamDataChart member is exposed in the code-behind of the XamDataChartHostControl definition in the WPFDVChartControl.xaml.cs file as shown below:

public XamDataChart XamDataChart
{
      get
      {
          return wpfWebDataChart1;
      }
}

This member allows us to access the XamDataChart from within the Windows Forms code and set its properties, such as series visibility and series marker type, for example.

Now that we’ve looked at how the WPF user control is set up, let’s see how we can host it within the Windows Forms project. Hosting is implemented by the ElementHost control, which is added as a child of a group panel on the form. We create an instance of the XamDataChartHostControl, and we set it as a child of the ElementHost control. The relevant code is in the Form1.cs file, in the Form1_Load event handler, as shown below:

//constructing the hosting element for the WPF component
ElementHost winformsHostControl = new ElementHost();
winformsHostControl.Dock = DockStyle.Fill;

//initialize the WPF user control containing the chart component
chartUserControl = new XamDataChartControl.XamDataChartHostControl();

//hosting the WPF component in the host element
winformsHostControl.Child = chartUserControl;

//add the hosting control to the group box on the form
groupBox1.Controls.Add(winformsHostControl);

//initializing data source with window size value specified by the trackbar
tickerBuffer = new TickerBuffer(DataLoader.HistoricalData, windowSizeTrackbar.Value);

//fill the ticker buffer with historical data
tickerBuffer.AddRecordsFromHistoricalData(tickerBuffer.WindowSize);

//associating a data set with the hosting control - this data will be made available to the hosted WPF chart component
chartUserControl.DataContext = this.tickerBuffer;

Databinding the chart

The XamDataChart is bound to the TickerBuffer class implementing the IEnumerable interface. It maintains a list of instances of the Row class. By calling the AddRecordsFromHistoricalData member function, you can add records from a database of historical data to the data to be bound to the chart. The TickerBuffer has a size, which is controlled using the WindowSize member. It is set by the trackbar controlling window size in the main form of the application.

By setting the DataContext member variable of the chartUserControl, as shown in the last line of the code segment above, the XamDataChart is bound to the TickerBuffer instance. This allows the chart to reference properties of the Row objects in its series definitions in order to setup the bindings of the data items and the popup labels.

Accessing XamDataChart properties

We can access the properties of the XamDataChart by using the XamDataChart member of the chartUserControl. This gives us a lot of flexibility in controlling the setup and appearance of the XamDataChart from within the Windows Forms code. An example is the code used in the handler of checkbox controlling the visibility of the chart legend:

private void showLegendChk_CheckedChanged(object sender, EventArgs e)
{
chartUserControl.XamDataChart.Legend.Visibility = showLegendChk.Checked ? System.Windows.Visibility.Visible : System.Windows.Visibility.Collapsed;
}

Summary

We’ve looked at how to provide powerful data-browsing capabilities including zooming and panning in your Windows Forms application using our powerful new WPF Data Visualization XamDataChart component. We’ve described the functionality of the sample application, and looked through the relevant sections of the code. Please make sure you download the sample and give it a try. It’ll go a long way toward helping you provide such capabilities in your own application, capabilities that will surely impress your users, and make you a star.

As always, if you have any questions or feedback, please use the forum below, or write me at kmatev(at)infragistics.com