Creating Chart with Aspnet ReportViewer control

Comments (21) | Share

Introduction

This article shows on how to generate a chart (a graphical representation of data) using the aspnet ReportViewer control. Basically, this report is called an rdlc file “Local Mode” which means that a report is generated at the client side and no connection established to the Sql Server Reporting Service Server.

In this example, I am creating a report(chart)  that would display the stock out movement.

The page includes a DropDownList to allow users to filter a specific stock category that he wants to view and a ReportViewer control that contains the chart.

I used my own database called “MyDatabse” where the data to be generated are stored. Below are the steps on how we are going to generate a simple chart using reportviewer control.

STEP 1. Creating a DataSet.xsd file

1. Under Solution Explorer, right-click on the App_Code folder.
2. Select “Add New Item”.
3. Select “DataSet”. In this article, I used the default name “DataSet1.xsd”. Note that you can assign a name to your dataset if you want to be specific. See Figure 1

Figure 1

1. Click Add
2. The TableAdapter Configuration Wizard should appear automatically in the DataSet Designer.
3. Select the “TableAdapter” to bring up the wizard. See Figure 2

Figure 2

1. Established a new connection or you may use existing DB connection.
2. Click next and choose “Use Sql Statements”. In this example I used simple sql statements
3. Click next and Click the “Query Builder” button. See Figure 3

Figure 3

1. After that a pop up window that contains the tables in DB will appear. Select a table from the list and choose a column fields that you want to use to generate a report.

Note:

Here in my example, I selected the “CategoryName, ItemDescription, qty and available fields in tbl_Stocks” since I’m going to generate a report that shows the stock out movement per category.

1. Figure 4 shows the display after you have created the DataSource.

Figure 4

So we already have DataTable to be used as a report datasource called “DataSet1.xsd”. The next step is to create the report deifinition or “rdlc file”. To begin please follow the steps below:

STEP 2. Creating an rdlc file

Rdlc file is basically where your data report is being created and manipulated including charts, tables and so on. It provides a designer so that you can set the look and feel of your report to be generated.

Note:

To select different types of charts, just click right click on the chart and click properties.

1. Under Solution Explorer, right-click and select “Add New Item”.
2. Select the “Report” template. See Figure 5

Figure 5

1. In this article, I will use the default name Report.rdlc. Click “Add” to add Report.rdlc to your project.

Note:

 “rdl” stands for Report Definition Language. The “c” stands for Client. Hence, the extension .rdl represents a server report. The extension .rdlc represents a local report.

1. In the toolbox, drag a chart control into the designer. By default the charts is rendered as a column type chart. To change the type just right click on the chart and select properties. See Figure 6.

Figure 6

Here in my example, I used Bar type chart instead because it is more appropriate to use it in displaying this kind of report.

Double click on the chart. See Figure 7

Figure 7

As what you have observed, there are different areas in the chart where you can put fields in it.

1. So under the Web Data Sources, Find the DataSet that you have just created earlier and drag the fields that you want to display into a specific area. Just be careful in locating a data field into the chart. The data field should fit on each area to get the proper result.
2. Save your rdlc file which in this example is “Report.rdlc”

STEP 3. Displaying the chart in ReportViewer control

ReportViewer control is simply acts as the container for your rdlc file. It is where your data will be displayed. One advantages of reportviewer control is that you can export your report in pdf or in excel format.

1. Add a Web Form and drag a ReportViewer control inside your web form.
2. Drag a DropDownList in your web form and set autopostback to true. It should look like Figure 8

Figure 8

Set your Web form as a start up page

1. Next, bring up the smart tag of the ReportViewer control (See Figure 9). Select “Report.rdlc” in the “Choose Report” dropdown list. “Report.rdlc” was created in Step 2.

Note:

Local Reports have the extension .rdlc. Server Reports are labeled with .rdc

Figure 9

STEP 4. Add the snippet for the “DropDownList_SelectedIndexChange event” to generate the report based on user selections

Note:

Don’t forget to include the “Microsoft.Reporting.WebForms” namespace in your code-behind file.

 Compile and run the report. The result can be seen at the screen shot below:

As what have you seen in the page it has a dropdownlist where the user can select a specific category and generates the chart pertaining to that category.

Happy Coding!

By: Vincent Maverick Durano