Geeks With Blogs

News

Microsoft MVP


DZone MVB


Moderator at CodeASP.NET


Quiz Master







free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

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.

 

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.

 

Happy Coding!

 

By: Vincent Maverick Durano

Technorati Tags: ,,
Posted on Monday, February 4, 2008 2:04 AM ADO.NET , ASP.NET | Back to top


Comments on this post: Creating Chart with Aspnet ReportViewer control

# re: Creating Chart with Aspnet ReportViewer control
Requesting Gravatar...
Can u write something about Repeating the background color of chart depending on the datavalues.
Left by New to chart controls in Report. on Aug 04, 2008 5:57 PM

# re: Creating Chart with Aspnet ReportViewer control
Requesting Gravatar...
Good Article but can you plz provide a zip samplecode thanks
Left by Talha on Oct 04, 2008 7:31 PM

# re: Creating Chart with Aspnet ReportViewer control
Requesting Gravatar...
That's great.
I want to use Report Viewer in asp.net becouse i print some document usind parametrize query .

please help me?
Left by Md.Meraj on Jan 01, 2009 10:26 PM

# re: Creating Chart with Aspnet ReportViewer control
Requesting Gravatar...
How to re size the chart to 200 X 200 without scroll bar?
I wanted to show two graphs in same page within report viewer control.
Left by Sheshagiri on Jan 10, 2009 11:19 PM

# re: Creating Chart with Aspnet ReportViewer control
Requesting Gravatar...
Hey while displaying bar chart ,all the bars appear in same size .but i want to display the bars accoring to the value.
Can any one help me
Left by Priya stella on Feb 21, 2009 3:36 AM

# re: Creating Chart with Aspnet ReportViewer control
Requesting Gravatar...
Hey while displaying bar chart ,all the bars appear in same size .but i want to display the bars accoring to the value.
Can any one help me
Left by s01 on Feb 24, 2009 8:21 PM

# re: Creating Chart with Aspnet ReportViewer control
Requesting Gravatar...
Hey i have same problem while displaying bar chart the bars appears in same size.
i have manually binded the datasource to reportviewer.

did u find the solution??
Left by Jagwinder Singh on Mar 03, 2009 7:26 PM

# re: Creating Chart with Aspnet ReportViewer control
Requesting Gravatar...
Will this work on a remote web server as well. I have created and run multiple reports locally...but unable to run from a web server.
Left by Bud Wetzel on May 07, 2009 7:20 AM

# re: Creating Chart with Aspnet ReportViewer control
Requesting Gravatar...
This's good article for developer.
Thank a lot.
Left by Boronicky on Jul 30, 2009 3:59 PM

# re: Creating Chart with Aspnet ReportViewer control
Requesting Gravatar...
This is a good article.Thanks a lot.
can we bind more than one datatable to reportdatasoure as
ReportDataSource("DataSet1_DataTable1", dt);
ReportDataSource("DataSet1_DataTable1", dt2);

I have a .rdlc file where i need to display student details like their name,age,etc form one dataset and display a chart from another dataset
How do i go about it?
Left by JYOTHI on Jul 30, 2009 6:34 PM

# re: Creating Chart with Aspnet ReportViewer control
Requesting Gravatar...
Hi vinz Thanks for good Article.

Can you provide the Download option of your code where we can download the code please .

Hope Hear from you

Best Regards
Left by Rameez on Dec 20, 2009 5:33 PM

# hrdlc
Requesting Gravatar...
hi,i am new to this blog,i have developed a rdlc report,chart type,age on x-axis(one column) and 6weights on y-axis as line types,
i want to show columnname(height1)on line1 like all lines,height1 shows on line 1 it can show one tome only,if i keep in data point it can repeatedon several time,can i show height1 on line1 after line end,if any one knowsabout this pls mail plhk26@gmail.com
Left by hari on Feb 12, 2010 4:32 PM

# secondary y-axis for chart
Requesting Gravatar...
hi,i am hari,i have developed a Charts control with type line,i want to show y-axis column in both opposite sides,ie,how can i show secondary y-axis for
chart type,pls reply to plharikrishna_33@yahoo.com
Left by hari on Feb 25, 2010 3:24 PM

# re: Creating Chart with Aspnet ReportViewer control
Requesting Gravatar...
How could I have percentages on charts?
Left by Vahaj on Mar 01, 2010 8:48 PM

# re: Creating Chart with Aspnet ReportViewer control
Requesting Gravatar...
hi,i am hari,
i have developed rdlc report,chart line type,i have taken major gried line ,i have given a one color for gridline and its fine,but i want to give a different color for
X-axis and y-axis color,my problem is grid lines color is coming in x-axis and y-axis,
if any one know please give reply to plharikrishna_33@yahoo.com
Left by hari on Mar 09, 2010 7:45 PM

# re: Creating Chart with Aspnet ReportViewer control
Requesting Gravatar...
Hi, Vinz.

I have the same problem than Priya, S01 and Jagwinder.
All the bars appear in same size .but i want to display the bars acording to the value.

Help, please
Left by Jeshu on Apr 04, 2010 6:08 AM

# re: Creating Chart with Aspnet ReportViewer control
Requesting Gravatar...
I have the solution.

By default, there is a function count about values. I have to change by Cint and works.

Regards,
Left by Jeshu on Apr 04, 2010 8:20 AM

# re: Creating Chart with Aspnet ReportViewer control
Requesting Gravatar...
I have the same problem than Priya, S01 and Jagwinder.
All the bars appear in same size .but i want to display the bars acording to the value.
Left by indian dj on Dec 03, 2010 9:32 PM

# re: Creating Chart with Aspnet ReportViewer control
Requesting Gravatar...
thanks thanks
Left by Ajay Mathew George on May 03, 2011 8:46 PM

# re: Creating Chart with Aspnet ReportViewer control
Requesting Gravatar...
this tutorial is helping thanks lot man...................................
Left by mesfin on Nov 16, 2011 3:52 AM

# re: Creating Chart with Aspnet ReportViewer control
Requesting Gravatar...
Please help me out here. I need to show ONLY THE LAST 5 ROWS OF MY TABLE. I'm using a MySql database. The instruction "limit 5" does not work. I really need to do this, please help me.
Left by Andrea Grimaldi on Apr 02, 2012 2:31 AM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net