AspdotnetCodes.com
Search
Articles
Books
Resources
Asp.Net News
Downloads
Free Tech Magazines
Asp.Net Web Hosting
Archives
Softwares
Newsletter
Suggest Us
Link to Us
Feeds Subscription
Articles
Questions & Answers
Tips & Tricks
 Part 3: Create Asp.Net Local Report with Chart Control using Visual Studio 2010
Posted by Moderator1 on 11/15/2012 6:27:33 AM Category: Asp.Net 2.0
Total Views : 66186
Add to my favorites
Email to friend
  
Introduction
The Chart Controls are used to display the data in graphical representation. The visual appeal helps the users to understand and interpret the data, its trends and its pattern. This article explains the basic properties and methods of the Chart control, to help the programmers to understand and build the report in a fast and efficient way. The sample used to demonstrate is created using Visual Studio 2010.
Understanding the Chart Control:

To build any kind of chart control, we must first understand the three different groups in the chart such as Values, Categories and Series. To get better understanding about these groups, go through the article in MSDN site http://msdn.microsoft.com/en-us/library/ms252128%28v=vs.90%29 . For quick understanding, about the positions of the Values, Categories and Series, refer the below screen cap.

Specify Filters in the subreport
 
Let us create a report to displays a Line Chart that shows Yearly sales of 3 types Bicycles using Visual Studio 2010. The sample data will load from a table called “ChartDemo”, which contains the number sales by year for all the 3 types of bicycles. We have created this article, with simple steps to follow with screen shots captured for every step.

Step 1: Open Microsoft Visual Studio 2010 project, add a new DataSet file and let the file name as its default name as “DataSet1.xsd”.
Choose Subreport to include in Main report

Step 2: Open the Server Explorer, connect the database. Drag and Drop the “ChartDemo” table into the Dataset designer in order to bind the data with the Local Report.

Set subreport Parameters

Step 3: Next, add RLDC Report into the project.

Set subreport Parameters

Step 4: Open the Report Data section, which can be opened by keeping the Report as active tab, then go to “View > Report Data”. Click on the New > Dataset menu, to open the Dataset Properties Dialog box.

 
Set subreport Parameters
Step 5: In the Dataset Properties dialog box, input the Name field as “DataSet1_ChartDemo”, choose the Data Source as “DataSet1” and Available Datasets as “ChartDemo”.


NOTE: The DataSet name “DataSet1_ChartDemo” is very important, as it must be the same as the ReportDataSource name to be mentioned in the code behind.

Show Subreport in ReportViewer Control


Step 6: Next, from the toolbox, drag and drop the “Chart” control into the Report body.
Set subreport Parameters

Step 7: The “Select Chart Type” dialog box will be opened automatically. Choose your desired type of chart control. For demonstration purpose of this article, we have used “Line” Chart Type. Click “OK” after selecting the Chart Type.

Set subreport Parameters
Step 8: Now you can see the Line Chart control appears in the report body section. The Chart control in Visual Studio 2010 is designed in an efficient way and simplifies developer’s task. You can click on any section to change the values of the properties.
Set subreport Parameters
Step 9: Change the Axis Titles by double click on the label as “Years” in x-axis and “Sales” in y-axis.

Step 10: From the Report Data section, drag and drop the “ReadingDate” column into the Category fields section.
Set subreport Parameters
Step 11: To change the properties of the “ReadingDate” Chart member, that will display in the x-axis, right click on it and click “Categories Group Properties”.
Set subreport Parameters
 
Set subreport Parameters
Click on the  button and change the expression value as shown above in the Expression dialog box. Click “Ok” to save the changes. Now the x-axis will display the Year from the ReadingDate column.

Next we need to concentrate on the y-axis changes.

Step 12: From the Report Data section, drag and drop the ReadingValue1, ReadingValue2 and ReadingValue3 into the Data Fields section of the Chart control. These 3 values are the number of sales of 3 types of bicycles.
Set subreport Parameters

Step 13:
To change, the Legend of the Series, right click on the series and select “Series Properties…”.
Set subreport Parameters

In the Series Properties, go to Legend Tab, change the Series legend text as “Series 1”.
Set subreport Parameters
Step 14: Now, it’s time to add the ReportViewer into the aspx page. In the Default.aspx, drag and drop the ReportViewer control from the toolbar.
Set subreport Parameters
Step 15: In the properties tab of the ReportViewer control, chage the LocalReport – ReportPath property to point to the location of the report.
Set subreport Parameters
Step 16: In the code-behind of the Default.aspx, add the required namespaces to generate the report.
using System.Data.SqlClient;
using System.Data;
using Microsoft.Reporting;
using Microsoft.Reporting.WebForms;
Step 17: To retrieve the data from the ChartDemo table, write the below method.
private DataTable GetReportData()
{
  SqlDataAdapter da = new SqlDataAdapter
      ("Select * from ChartDemo",
      ConfigurationManager.ConnectionStrings["YourConnectionString"].ConnectionString);
  da.SelectCommand.CommandType = CommandType.Text;
  DataTable dt = new DataTable();
  da.Fill(dt);
  return dt;
}
The GetReportData method selects all the rows from the ChartDemo table and returns the result in DataTable format.

Step 18: In the Page Load event, write the following code to generate the report.
protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
  {
    ReportViewer1.ProcessingMode = ProcessingMode.Local;
    Microsoft.Reporting.WebForms.LocalReport repLocal = ReportViewer1.LocalReport;
    DataTable dtChartDemo = new DataTable();
    dtChartDemo = GetReportData();

    ReportDataSource dsRepChartDmo = new ReportDataSource();
    dsRepChartDmo.Name = "DataSet1_ChartDemo";
    dsRepChartDmo.Value = dtChartDemo;
    repLocal.DataSources.Clear();
    repLocal.DataSources.Add(dsRepChartDmo);
    repLocal.Refresh();  
  }
}
The above code declares the processing mode of the ReportViewer control as Local. Then an object as repLocal is created as Local Report. ReportDataSource objects is created with Name as “DataSet1_ChartDemo” and its values is assigned with the DataTable which contains the ChartDemo data. The ReportDataSource is added to the DataSource of the repLocal object, then the refresh method is called to generate the report.

Save all the changes, build the project. Browse the “Default.aspx” page, the browser will open and you can see the report being generated as follows.
Set subreport Parameters
You need to Login or Register to download Source Code.
 
Viewer's Comments
 Rating & Comments
A word 'Excellent' means lot to the author of this article. You can give comments about this article but not the author.
Rate this Article:
Name:
Email Id:  
We never display your email id anywhere.
Comment/Question: Max. 500 letters
One plus Thirty Equals To
 
Sponsored by
The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks - Free 158 Page Preview
Web Application Security — How to Minimize Prevalent Risk of Attacks
SearchSAP