In this article I will explain a short step by step tutorial with example on how to add charts to the ASP.Net ReportViewer control. I will explain with an example to display a Line Chart in the RDLC Report ReportViewer in ASP.Net using C# and VB.Net.
I will be making use of a Typed DataSet for populating the Chart data in the RDLC Report.
Here I am making use of Microsoft’s Northwind Database. You can download it from here.
1. Add Typed DataSet to the ASP.Net Website
Since I am using disconnected RDLC Reports we will make use of Typed DataSet to populate the RDLC Reports with data from database.
2. Adding DataTable to the Typed DataSet
Our next step would be to add a DataTable to the Type DataSet.
3. Adding Columns or fields to DataTable
In the DataTable we need to specify the column names that we want to display in the RDLC Report.
Note: The Column Names of the DataTable must exactly match with the actual column or alias names in the query.
By default all the columns are of String Data Type but you can also change the data type as per your need using the Properties window.
4. Adding the RDLC Report
Using the Add New Item option in Visual Studio you need to add new RDLC Report.
5. Add Chart to the Report
The above action will create a Blank Report. You will need to right click and Click Insert and then Chart as shown below.
6. Choose the Chart Type
Next you need to choose the type of Chart you want to use in your Report from the Select Chart Type dialog.
7. Choose the DataSet
Now we need to choose the DataSet that will act as the DataSource for the RDLC Report. Thus we need to select the Custom DataSet that we have created earlier.
8. Set the Data Fields
Once the DataSet is chosen, the Line Chart will be displayed in the RDLC Report. Now we need to
1. Right Click on the Line Chart.
2. Click the Data Fields section and select the Field for the Line Chart’s Data Field by clicking on the small icon as shown below. I have chosen OrderId as Data Field.
Note: Data Field is a column that will determine the size of each Line in a Line chart.
3. Repeat the same procedure for the Category fields. I have chosen, Ship City as the Category field.
You will notice that an aggregate SUM function is automatically applied to the OrderId.
But since I don’t want to SUM OrderId, I will have to modify it to make use of COUNT aggregate function by right clicking the Data Field section and then clicking Series Properties.
In the Series Properties Window, you can easily change the Formula you want to use. Since I need to display Order Distribution in various Cities, I have used COUNT aggregate function.
9. Displaying Labels on Chart and Changing Title
Our next job is to display the values of each Line in Line Chart. Thus you need to right click on the Chart and then click Show Data Labels.
Then you need to double click on Chart Title and type in the appropriate Title for the Chart.
You can also hide the Axis Title by right clicking on each Axis Title and then unchecking as shown below.
10. Adding Report Viewer to the page
In order to display the Report we will need to add ReportViewer control to the page from the Toolbox. The ReportViewer controls requires ScriptManager on the page.
Once you add the ReportViewer control to the page, your page must look as below.
<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<rsweb:ReportViewer ID="ReportViewer1" runat="server" Width="600">
11. Populating the RDLC Report from Database
Below is the code to populate the RDLC Report from database. The first statement notifies the ReportViewer control that the Report is of type Local Report.
Then the path of the Report is supplied to the ReportViewer, after that the CustomDataSet is populated with records from the Orders Table and is set as ReportSource to the Report.
protected void Page_Load(object sender, EventArgs e)
ReportViewer1.ProcessingMode = ProcessingMode.Local;
ReportViewer1.LocalReport.ReportPath = Server.MapPath("~/Report.rdlc");
CustomDataSet dsOrders = GetData();
ReportDataSource datasource = new ReportDataSource("dsOrders", dsOrders.Tables);
private CustomDataSet GetData()
string query = "SELECT ShipCity, OrderId FROM Orders WHERE ShipCountry = 'France'";
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
SqlCommand cmd = new SqlCommand(query);
using (SqlConnection con = new SqlConnection(conString))
using (SqlDataAdapter sda = new SqlDataAdapter())
cmd.Connection = con;
sda.SelectCommand = cmd;
using (CustomDataSet dsOrders = new CustomDataSet())
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
ReportViewer1.ProcessingMode = ProcessingMode.Local
ReportViewer1.LocalReport.ReportPath = Server.MapPath("~/Report.rdlc")
Dim dsOrders As CustomDataSet = GetData()
Dim datasource As New ReportDataSource("dsOrders", dsOrders.Tables(0))
Private Function GetData() As CustomDataSet
Dim query As String = "SELECT ShipCity, OrderId FROM Orders WHERE ShipCountry = 'France'"
Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim cmd As New SqlCommand(query)
Using con As New SqlConnection(conString)
Using sda As New SqlDataAdapter()
cmd.Connection = con
sda.SelectCommand = cmd
Using dsOrders As New CustomDataSet()