Binding a Chart's Series to Data

• Dec 27, 2021
• 4 minutes to read

This document describes how to create a report with an XRChart control that displays products and their prices for a selected category. In this example, series data has a single data source, but you can use different data sources for different series, if required.

This tutorial consists of the following steps.

• Create a Reporting Application
• Add a Chart to the Report
• Add Series to the Chart
• Customize the Chart
• Preview and Publish the Report

Create a Reporting Application

To get started with this tutorial, open an existing reporting application or create a new one from scratch. To learn how to create a reporting application on the platform of your choice, see Adding a Report to Your .NET Application.

The report created in this tutorial will be platform-agnostic, which means that you can use it later in applications created on any supported platform. See Storing and Distributing Reports to learn more about storing and reusing reports.

Add a Chart to the Report

To add a chart control to a report, do the following.

1. Drop the XRChart control from the DX.17.2: Report Controls Toolbox tab onto the Detail band.

   

   After you drop the chart, the Chart Wizard will be automatically invoked if its “Display the designer every time a new chart is added” option is enabled. At this step, click Cancel to close the window; it will be used later.

2. To bind the chart to data, click its smart tag. In the invoked actions list, expand the drop-down list for the XRChart.DataSource property and click Add Report Data Source.

   

3. The invoked Data Source Wizard will guide you through the process of assigning a data source to the chart. Bind the chart to the Products table of the Northwind database as described in the Bind a Report to a Database topic.

   After the data source is created, it will be assigned to the chart’s DataSource property.

4. Invoke the chart’s smart tag once again, open the drop-down list for the XRChart.DataMember property, and select the Products item.

   

Note

Since you have placed the Chart in the Detail band, the report’s XtraReportBase.DataSource property should be set to None. Otherwise, the chart will be repeated in the preview as many times as there are records in the data source.

Add Series to the Chart

To add series to the chart and specify their data binding properties, do the following.

1. Click the chart’s smart tag and, in the invoked actions list, click Run Designer.. c

2. In the invoked Chart Wizard, add a new series to the chart control. To do this, locate the Series element in the chart elements tree and click the plus button. In the invoked list of series types, select the required type (e.g., Bar).

   

3. To populate the created series with points, select it in the tree and switch to the Data tab at the right of the designer’s window. Select an existing data source in the corresponding drop-down list. Then, drag-and-drop required data fields to the Argument and Value cells to define coordinates for series points.

   

4. Go to the Properties tab to see that the Argument Data Member and Value Data Members settings are automatically assigned to the corresponding fields.

   To filter series data, click the ellipsis button for the Data Filters property and in the invoked dialog, create and adjust filtering criteria.

   

   To save changes and quit the dialog, click Close.

5. Create one more series with the same settings, but this time, select the Point view type.

Customize the Chart

To improve the chart’s appearance, make the following adjustments.

• Remove the chart’s legend, since the chart series are bound to the same data. To do this, select the Legend in the chart elements tree, and in the Options tab, disable the Visibility check box.
• The point labels for Series1 are unnecessary, so select the Label node under this series and disable the Visibility check box.
• Customize the appearance of Series2 markers. To replace the default circle with the upside down triangle, set the View.PointMarkerOptions.Kind property to InvertedTriangle and View.PointMarkerOptions.Size to 12.
• Customize the chart appearance settings. For instance, in the drop-down Palette list, select Nature Colors.

Preview and Publish the Report

Your report is now ready to be generated. You can view it by switching to the Preview tab.

To learn how to preview, print, and/or export reports in an application depending on its target platform, see Cross-Platform Reporting.