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.
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
4. Click Add
5. The TableAdapter Configuration Wizard should appear automatically in the DataSet Designer.
6. Select the “TableAdapter” to bring up the wizard. See Figure 2
7. Established a new connection or you may use existing DB connection.
8. Click next and choose “Use Sql Statements”. In this example I used simple sql statements
9. Click next and Click the “Query Builder” button. See Figure 3
10. 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.
11. Figure 4 shows the display after you have created the DataSource.
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
3. 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.
4. 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.
5. 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.
6. 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
3. 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.
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Microsoft.Reporting.WebForms;
public partial class _StockMonitoring : System.Web.UI.UserControl
{
//A method that gets the stock categories in the database and add it in the DropDownList item list
protected void getCategories()
{
//comDB is class where my query is being manipulated
//I use DataTable as my DataSource
//Note that the “StocksCls” is a class that composed of methods like the “GetItemCategories()”.
//The method “GetItemCategories()” is where the data is being processed, it basically fetching the data from the database and return it as a datatable.
StocksCls get_stock_categories = new StocksCls ();
DataTable dt = get_stock_categories.GetItemCategories();
if (dt.Rows.Count > 0)
{
DropDownList1.Items.Add("Select Category");
DropDownList1.Items.Add("All");
for (int i = 0; i < dt.Rows.Count; i++)
{
string cat = dt.Rows[i]["CategoryName"].ToString();
DropDownList1.Items.Add(cat);
}
}
}
//A method that populates the ReportViwer control
protected void populateReportViewer()
{
//A method that populates the ReportViwer control
StocksCls result = new StocksCls ();
DataTable dt = result.getItemsPerCategory(DropDownList1.SelectedItem.Text);
ReportDataSource rds = new ReportDataSource("DataSet1_DataTable1", dt);
ReportViewer1.LocalReport.DataSources.Clear();
ReportViewer1.LocalReport.DataSources.Add(rds);
ReportViewer1.LocalReport.Refresh();
}
//A method that populates the ReportViwer control if the user select “ALL”
//"DataSet1_DataTable1" is the name of ReportDataSource we have created earlier in step 1
protected void getAllItems()
{
StocksCls items = new StocksCls ();
DataTable dt = items.getAllItemPerCategory();
ReportDataSource rds = new ReportDataSource("DataSet1_DataTable1", dt);
ReportViewer1.LocalReport.DataSources.Clear();
ReportViewer1.LocalReport.DataSources.Add(rds);
ReportViewer1.LocalReport.Refresh();
}
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
getCategories();
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
populateReportViewer();
if (DropDownList1.SelectedItem.Text == "All")
{
getAllItems();
}
else
{
populateReportViewer();
}
}
}
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.
About the Author: