Total votes: 0
Print: Print Article
Please login to rate or to leave a comment.
Published: 13 Jul 2009
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.
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
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.
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.
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
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
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
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
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
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
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
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
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
When you configure the data member as above the programs adds this snippet shown in the next listing to the Form's
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
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
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
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.
Sorry, no bio is available
This author has published 7 articles on DotNetSlackers. View other articles or the complete profile here.
Please login to rate or to leave a comment.