Display Line Chart in RDLC Report in ASPNet using C and VBNet

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.

You can also refer my article RDLC report step by step in ASP.Net using C# and VB.Net.

Database

Here I am making use of Microsoft’s Northwind Database. You can download it from here.

Download and install Northwind Database

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.

Display Line Chart in RDLC Report in ASP.Net using C# and VB.Net

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">

</head>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<rsweb:ReportViewer ID="ReportViewer1" runat="server" Width="600">

</rsweb:ReportViewer>

</form>

</body>

</html>

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.

Namespaces

using System.Data;

using System.Configuration;

using System.Data.SqlClient;

using Microsoft.Reporting.WebForms;

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

ReportViewer1.ProcessingMode = ProcessingMode.Local;

ReportViewer1.LocalReport.ReportPath = Server.MapPath("~/Report.rdlc");

CustomDataSet dsOrders = GetData();

ReportDataSource datasource = new ReportDataSource("dsOrders", dsOrders.Tables[0]);

ReportViewer1.LocalReport.DataSources.Clear();

ReportViewer1.LocalReport.DataSources.Add(datasource);

}

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())

{

sda.Fill(dsOrders, "DataTable1");

return dsOrders;

}

VB.Net

Namespaces

Imports System.Data

Imports System.Configuration

Imports System.Data.SqlClient

Imports Microsoft.Reporting.WebForms

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))

ReportViewer1.LocalReport.DataSources.Clear()

ReportViewer1.LocalReport.DataSources.Add(datasource)

End If

End Sub

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()

sda.Fill(dsOrders, "DataTable1")

Return dsOrders

End Using

End Function

Screenshot

Demo

View Demo

Downloads

Download Code

Display Line Chart in RDLC Report in ASP.Net using C# and VB.Net

Related

Ask Question

Company

Explore

Follow us

Contact Us