Skip to main content
All docs
V25.1
  • 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
      Size 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