Post
Ask Question

How to Create RDLC Charts and Complete Series of All Charts

Introduction

This article shows all the sample RDLC charts and how to configure RDLC and display the RDLC charts to users or clients.

In this series we will go across all the following charts of RDLC:

  • Column
  • Line
  • Shape
  • Bar
  • Area
  • Range
  • Scatter

Why to create charts when we have data to display

By transferring information into graphs and charts it allows individuals to visualize the info, that helps them understand it better.

Because if we show tabular format data the client or users will not able to understand and visualize it.

Tabular format



Chart format



Which one is better to understand? Tabular format or chart format? I know you will like the chart one.

Now let's move one step forward and develop it.

Requirement for Developing RDLC

It's in bulid charts from Microsoft and it's freeware, you do not need to pay any extra money for it.

You will need SQL Server and Visual Studio for developing.

It works good with .Net Framework 4.0.

Let's start with the SQL Part

In this I will show which table I am using and which type of query I am binding to the reports.

Here I have used the following 2 tables.

  1. PaymentDetails
  2. PlanMaster

In the PaymentDetails table I am storing all the payment related data with PlanID from the PlanMasterTable.

In the PlanMaster table I am storing all Plannames.

Here I am providing a Table Snapshot view. I will provide all the tables script and data for testing.



Here is the query that will bring records and we would bind to the charts.

It's a normal query I have used. In a real scenario it would have many more tables.



Hey we have now completed the SQL Server part. Now we are moving to C# and ASP.NET.

Creating ASP.NET Web Application

1. Column charts

Create a new ASP.NET Web Application named AllChartsTuto and Select .Net Framework 4.0 while adding the project.

After adding you will get a blank solution with default stuff provided by ASP.NET Web Application.

Add a new page to the project with the name Columncharts.aspx.



After adding the page just drag a Script Manager onto the Design Page and ReportViewer of RDLC on the page.

1. Scriptmanager



2. RDLC reportviewer



After adding you will have like this view on your aspx page.



After completing the design part we will now proceed to the C# parts.

Now I am adding a dataset to the project.

For adding the dataset just right-click on the solution and select Add New Item.

After selecting Add New Item a new Popup Wizard will open as shown in the following image.

From the Installed Template select Data and inside that select Dataset. Keep the name as it is.



After adding you will see the Dataset in the project as in the following image.



Now double-click on Dataset, it will open inside that right-click and select Add inside that select DataTable.



Like this view you will see after adding the Datatable.



I will be adding 2 fields inside this datatable (PaymentAmount, PlanName).



After adding just select the proper datatype from properties.

Add save it.

After completing the adding of the dataset I wrote a method to get the data from the database and bind the data to the charts.

In this method I had use Dataset1 that we have created.

ReportDataSource rds = new ReportDataSource("DataSet1", dt);

Method

  1. public void BindChart()  
  2.         {  
  3.   
  4.    using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DOI_WCConnectionString"].ToString()))  
  5.             {  
  6.                 string Query = "";  
  7.   
  8.  Query = "SELECT SUM(p.PaymentAmount)as PaymentAmount,PM.PlanName FROM PaymentDetails "  
  9.   +"p inner JOIN PlanMaster PM ON p.PlanID = PM.PlanID GROUP BY PlanName";    
  10.   
  11.                 SqlCommand cmd = new SqlCommand(Query, con);  
  12.                 cmd.CommandType = CommandType.Text;  
  13.                 SqlDataAdapter da = new SqlDataAdapter();  
  14.                 da.SelectCommand = cmd;  
  15.                 DataTable dt = new DataTable();  
  16.                 da.Fill(dt);  
  17.                 dt.TableName = "Graph"; // giving table Name  
  18.                 ReportDataSource rds = new ReportDataSource("DataSet1", dt);  
  19.                 ReportViewer1.LocalReport.DataSources.Clear();  
  20.                 ReportViewer1.LocalReport.DataSources.Add(rds);  
  21.                 ReportViewer1.LocalReport.Refresh();  
  22.   
  23.             }  
  24.   
  25.         } 

It's a simple method, just getting data from SQL and filling in the Datatable.

Finally you will see the report datasource and Report Viewer.

  1. ReportDataSource rds = new ReportDataSource("DataSet1", dt);  
  2. ReportViewer1.LocalReport.DataSources.Clear();  
  3. ReportViewer1.LocalReport.DataSources.Add(rds);  
  4. ReportViewer1.LocalReport.Refresh(); 

Here passing Datatables to ReportDatasource.

Passing ReportDatasource to ReportViewer.

Now calling this method on page Load:

  1. protected void Page_Load(object sender, EventArgs e)  
  2.       {  
  3.           if (!IsPostBack)  
  4.           {  
  5.               BindChart();  
  6.           }  
  7.       } 

Now after calling the method on page load now I an showing how to add a RDLC Report and Configure Chart.

Procedure to add RDLC Report

1. Right-click on Projects and select Add New Item.



2. Go inside the Reporting tab inside the InstalledTemplate.



Select Report from it and name it Columncharts.rdlc.

Like this will appear after adding the Report.



Now from the Report Data Tab select New Dataset .



After selecting a New Popup Wizard will popup as shown below.



From that select Data Source that will your Dataset Name that you have added.



After selecting Dataset Name you will see the Fields name and Datatype from dataset in Fields.

Now click OK and end it.

After adding a Dataset in the Report Tab you will see the Dataset and the fields in it.



Now right-click inside RDLC Colunm Report for adding a chart as shown below.



From the charts type select Columnchart and click OK.



After adding the chart you will see a Default chart that will be displayed.



On charts just double-click and Fields all Fields will appear.



Now as you hover over this place you will see all the Dataset Fields here. (As shown below.)



From that fields I will select my X and Y axis for the report.



At the bottom I will select PlanName as "X axis" and for "Y axis" I will select PaymentAmount.

At the top you will find the Sum of Payment amounts but we have already done a sum in our query; we don't require this to be removed, just right-click on those fields and select Series Properties.

A new wizard will pop up as shown below.



Click on the Expression Button on the right side; a New Wizard will popup of Expression (as shown below).



Now from this expression remove Sum and the brackets.



After that change click OK.

After removing Sum you will see this kind of chart.



Now the last thing is it to change the Title and Axis Title.

For that just double-click those fields and rename their Labels.



The final step is to bind the Report with the ReportViewer.

For this I will go to the Columncharts.aspx page and go to my desgin view; the following view will appear:



After selecting ReportViewer you will see a Report Viewer Task at the right corner of your ReportViewer.

From that select your Report RDLC file (Columncharts.rdlc).



This kind of HTML will be generated.



Finally we have completed everything, just save the code and run the application.

If you are developing it using the .Net Framework 4.0 then there will be no issues.

Final Output



2. Line Charts

Write the same code as above, just create a new RDLC with the name LineCharts.rdlc.

When selecting we just need to select a New Line Chart from Charts Types of Report Viewer.


.
After binding Dataset.



Now just save and run your application.

Final output



3. Shape charts

Write the same code as above, just create a new RDLC with the name Shape.rdlc.

When selecting we just need to select New Shape chart from the Chart Types of Report Viewer.



After selecting charts bind the dataset as shown when displaying the Column chart.

Now just save and run your application.

Final output



All the other Charts can be developed in the same way with little changes in configuration.

I am providing all the code and SQL Scripts with this article with an All Charts Example in it. You can download it and use it.

Making it Simple……



Similar Articles