Published: 13 Jul 2009
By: Jayaram Krishnaswamy

This article shows how you may bind the MS Chart’s chart control with a dataset. A Windows Forms project with a typed dataset is used in this example.

Contents [hide]

Introduction

The dataset used in the article is derived from a table in the resident SQL Server 2008. A columnar chart is bound to this data at run time. The article consists of the following sections. It will be helpful to review the previous articles 1, 2, and 3 on this site.

  • Creating a Framework 3.5 Windows Forms project
  • Adding chart and setting up the data series
  • Creating a typed dataset
  • Add bindings
  • Add code and test in C#
  • Code and test using VB

Create a Framework 3.5 windows Forms project

Bring up the Visual Studio 2008 IDE from its shortcut. Click File | New Project…. This brings up the New Project window and by default it will be a .NET Framework 3.5 project. If it is otherwise use the drop-down handle on the top right and set it to display .NET Framework 3.5. You need to provide a project name instead of accepting the default. Herein, the project name is ChartWithDataset.

Figure 1: Windows Form’s Application Project

Windows Form’s Application Project

Add a chart

You find Chart under Data in the Toolbox. Add a chart to the Form1 by dragging and dropping or by double clicking the control in the Toolbox. This adds an instance of a chart, Chart1 to the form. Right click the chart on the form to display the Chart properties. Scroll down and click on the line item, Series. Click right next to “(Collections)” to display the ellipsis button. Click the ellipsis button to bring up the Series Collection Editor. By default it will have Series 1 already present. Click the Add button to add a second series, “Series2” to this collection as shown in the next montage in Figure 02.

Figure 2: Chart on the form with two series configured.

Chart on the form with two series configured.

Add a dataset to retrieve the backend data

In ths article you will be using the Visual Studio IDE to create the dataset. Add a new item to the Project from Project | Add New Item...window. This opens the New Item window as shown. Change the default name of the dataset. Here in it is PT.

Figure 3: Add a dataset from New Item window.

Add a dataset from New Item window.

When you click OK the program adds a dataset to the Project folder as shown in the next figure.

Figure 4: Contents of the project folder

Contents of the project folder

A Dataset is also added to the Toolbox as shown in the next figure. This also adds a dataset designer interface to the IDE. Make sure you read the instructions in the designer.

Figure 5: Dataset in the Toolbox

Dataset in the Toolbox

Configuring the dataset

Presently the dataset is empty. We can use this interface to visually create a typed dataset which can be edited. Click View and then Server Explorer in the main menu. This opens a window displaying the various connections available as shown. Refresh the connections. This window can also be used for making a new connection. Herein, an existing connection to a named instance of the SQL Server 2008 will be used. The next figure shows the expanded view of all the tables. We will be using a table named PrincetonTemp from this database.

Figure 6: Server Explorer and the data connections

Server Explorer and the data connections

Drag and drop the table PrincetonTemp from the Server Explorer to the dataset designer surface. This adds the table to the designer as shown.

Figure 7: Adding a table to the data set designer

Adding a table to the data set designer

Right click PrincetonTempTableAdapter shown above. Click the Preview Data...drop-down menu item. This brings up the Preview Data window as shown. Click on the Preview button.

Figure 8: Data in the dataset

Data in the dataset

Data binding

We need to bind the chart to the dataset. The chart is on the form and we need to set the bindings to the control on the form. From the Toolbox add a Dataset on to the form. An instance of the dataset control dataset gets added to the form and the Add Dataset window shows up displaying the typed dataset created in the previous step. In the earlier steps we created the typed dataset PT.

Figure 9: Typed dataset to the form

Typed dataset to the form

Click OK on the Add Dataset window. An instance of dataset pt1 gets added to the form. What binds with the chart on the form is not the dataset but a binding source. In what follows you will be configuring the binding source.

Adding a binding source and configuring the same

Add a BindingSource to the form (drag and drop will do) from the Toolbox which binds objects on the form to data. Associate the dataset instance pt1 with the binding source as shown in the properties window of the binding source. Right click empty space along side DataSource in the bindingSource1 properties window. In the pop-up window expand other sources till you get to the Form1 list instances and click on pt1. This instance pt1 becomes the datasource for the binding source.

Figure 10: Binding source to pt1

Binding source to pt1

In addition to the binding source you also need to provide a data member. Click on DataMember (above the DataSource in bindingSource1 window) as shown and associate the data member in the pop-up window as indicated. In general there may be other members as well. In this simple demonstration there is only one data member.

Figure 11: Data member of the binding source

Data member of the binding source

You have completed the binding source configuration. The design of the form appears as shown here with all these elements added to the form.

Figure 12: Form (and Chart) design

Form (and Chart) design

When you configure the data member as above the programs adds this snippet shown in the next listing to the Form's load event:

Listing 1: Code added to the load event when the binding controls are added

Binding data to the chart

In order to bind data to the chart you could use the code shown in the next listing. The statement under “//Todo” was added by the program when you configured the binding source as explained earlier. The data source for the chart is the binding source and this is related to the dataset. The chart series x and y value members are found through the column names of the data table also related to the dataset. The column indices are used so that the x value member (which is common to series 1 and 2) “month” is found from

Listing 2: Code behind the form, Form.cs

With this code in place you can build the program and test it by bringing up the form as show in the next figure.

Figure 13: Form1 displaying the chart

Form1 displaying the chart

Binding data to chart in VB.NET

The procedure is exactly the same. You just start with a Windows Form’s project using Visual Basic. You add a new item, a dataset. Herein called VbPt1. You create the binding source in the same manner. The Form1’s code page would like as shown in the next figure.

Figure 14: Form1.vb of the Vb.NET project

Form1.vb of the Vb.NET project

A chart is also added to the form but a second series was not added in the design stage. This will be added in the code as shown in the code comments. Also the default colors and name of the two series have been modified at run time as shown in the listing for the form’s load event. Some of the message boxes are just to verify the column names so that they are properly associated with the chart.

Listing 3: Form1.vb code

When you build the project and run it to display the form, it will be displayed as shown in the next figure.

Figure 15: Display of the above chart

Display of the above chart

Summary

The article described in detail the process of binding a .NET Framework Typed dataset to a chart. Both Vb.NET and Csharp codes were used. The typed dataset was created using the built-in wizards of the IDE.

<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Jayaram Krishnaswamy

Sorry, no bio is available

This author has published 7 articles on DotNetSlackers. View other articles or the complete profile here.

Other articles in this category


Android for .NET Developers - Location and Maps
In Windows Phone and iOS getting the current position of the device in terms of latitude and longitu...
Android for .NET Developers - Using Web Views
In this article, I'll show a native app that contains a web-based view. The great news is that HTML ...
Android for .NET Developers - Building a Twitter Client
In this article, I'll discuss the features and capabilities required by an Android application to ta...
Developing a Hello World Java Application and Deploying it in Windows Azure - Part II
In this article we will see the steps involved in deploying the WAR created in the first part of thi...
Ref and Out (The Inside Story)
Knowing the power of ref and out, a developer will certainly make full use of this feature of parame...

You might also be interested in the following related blog posts


Adding IIS Manager Users and Permissions using PowerShell read more
Making a Step chart in RadChart for Silverlight and WPF read more
Using Microsoft's Chart Controls In An ASP.NET Application: Sorting and Filtering Chart Data read more
WPF / Silverlight: RadChart with ChartLegend as a ToolTip read more
Using Microsoft's Chart Controls In An ASP.NET Application: Rendering the Chart read more
Using Microsoft's Chart Controls In An ASP.NET Application: Plotting Chart Data read more
Using Microsoft's Chart Controls In An ASP.NET Application: Getting Started read more
ASP.NET MVC and the templated partial view (death to ASCX) read more
WPF Release History : Q1 2009 SP2 (version 2009.1.526) read more
Silverlight Release History : Q1 2009 SP2 (version 2009.1.526) read more
Top
 
 
 

Discussion


Subject Author Date
placeholder Nice Article Anil Pandey 1/7/2010 1:27 AM
how to add a data set to the form? John Wu 3/12/2013 6:50 AM

Please login to rate or to leave a comment.