Skip to main content
All docs

Create a Report with Charts

  • 8 minutes to read

This tutorial describes how to create a report that uses XRChart controls to visualize data.

You can view the online demo or view the desktop demo (the DevExpress Demo Center should be installed).

Report Result

Add a new blank report to your application and follow the steps below to create a report with charts.

Bind to Data

In this tutorial, the report is bound to a federated data source that joins the order information from an SQL database with product categories stored as JSON data. The report’s data member is not set.

  1. Create an SQL data source.

  2. Create a JSON data source.

  3. Create a Federation Data Source to unite the SQL and JSON data.

  4. Add calculated fields to the Field List.

    Right-click Orders in the Field List and select Edit Calculated Fields from the context menu. In the invoked Calculated Field Collection Editor, click Add to add a calculated field.

    Add Calculated Fields

    Configure the following properties to create calculated fields:

    Calculated Field Property Value
    Year DataMember Orders
    Expression GetYear([OrderDate])
    FieldType Int32
    Name Year
    Month DataMember Orders
    Expression [GetMonth([OrderDate])]
    FieldType Int32
    Name Month
    Quarter DataMember Orders
    Expression [Month] / 4 + 1
    FieldType Int32
    Name Quarter
    TotalSales DataMember SalesByCategory
    Expression Sum([Sales])
    FieldType Decimal
    Name TotalSales

Create the Report Layout

Select the report and enable the Landscape property. Set report margins to 55, 50, 50, 55.

Set Report Properties

Add the following bands and controls to the report:

  • Report Header Band

    Right-click the report and select Insert Band | ReportHeader from the context menu.

    Drop four XRLabel controls from the Toolbox onto the added Report Header band and set their properties:

    Label Property Value
    XRLabel1 Text Sales Analysis 2019
    Font Tahoma, 28pt, Bold
    ForeColor 0, 74, 101
    ForeColor 570, 63
    Location 10, 0
    XRLabel2 Text 1/1/2019 - 12/31/2019
    Font Tahoma, 8pt, Bold
    ForeColor Gray
    Size 570, 23
    Location 10, 63
    XRLabel3 Text Total Sales
    Font Tahoma, 11pt, Bold
    ForeColor Gray
    Size 390, 23
    Location 600, 0
    XRLabel4 Expression [SalesByCategory].[Sales]
    Format String {0:$#,##0}
    Font Tahoma, 22pt, Bold
    ForeColor 0, 74, 101
    Size 390, 40
    Location 600, 23

The resulting report layout should look like the one in the image below.

Initial Layout

Add Charts to the Report

The Chart Report contains three charts:

  • Annual Sales Comparison
  • Quarterly Sales Distribution
  • Product Categories

Add the Annual Sales Comparison chart to the report.

Add the Quarterly Sales Distribution chart to the report.

Add the Product Categories chart to the report.

View the Result

The report is ready. Switch to Preview to view the report.

Report Result


Tutorials that explain how to create different reports using Web Report Designer are included in the End-User Documentation online help section.