Skip to main content
BuyLog In
.NET Reporting Tools
Search in…
Docs > Reporting > Creating Reports in Visual Studio > Detailed Guide to Visual Studio Report Designer > Toolbox - Supported Report Controls > Using Charts and Pivot Grids > Binding a Chart to Data Using Series Templates
A newer version of this page is available. .
All docs
V17.2
Reporting
Product Information
Creating Reports in Visual Studio
Adding a Report to Your .NET Application
Getting Started with DevExpress Reporting
Detailed Guide to DevExpress Reporting
Detailed Guide to Visual Studio Report Designer
Toolbox - Supported Report Controls
Using Basic Report Controls
Using Bar Codes
Using Charts and Pivot Grids
Providing Data to Charts
Binding a Chart's Series to Data
Binding a Chart to Data Using Series Templates
Using Charts to Visualize Data in Report Groups
Linking a Chart with a Pivot Grid
Using Gauges and Sparklines
Drawing Lines and Shapes
Using Custom and Third-Party Controls
Dock Panels and Designer Options
Report Wizard
Creating End-User Reporting Applications
API Reference

Binding a Chart to Data Using Series Templates

  • 4 minutes to read

This document describes how to create a report with an XRChart control bound to data, so that all series are auto-created based on a common template, which specifies universal options for all series.

HowTo - AddChartGSP

This tutorial consists of the following steps.

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.

    HowTo - AddChartDropXRChart

    After you drop the chart, the Chart Designer 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.

    HowTo - AddChartDataSource

  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 GSP table of the GSP database as described in the Bind a Report to a Database topic (the gsp.mdb file is located in the directory where you installed DevExpress demos).

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

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

    chart-data-member-gsp

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.

Adjust the Series Template

To specify series data and adjust the series template, do the following.

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

    chart-smart-tag-run-designer

  2. In the invoked Chart Designer, go to the Data tab at the right of the designer’s window. Select an existing data source in the corresponding drop-down list and drag-and-drop required data fields to the corresponding cells.

    The Series cell specifies a data field that should provide data for series names. A new series should be created for each record in this data field. Use the Argument and Value cells to define from where data for point arguments and values will be obtained.

    chart-designer-auto-created-series

  3. Switch to the Properties tab and expand the Series Template option. As you can see, the SeriesBase.ArgumentDataMember and SeriesBase.ValueDataMembers properties have been automatically assigned to the corresponding data fields. Make sure that the SeriesBase.ArgumentScaleType and SeriesBase.ValueScaleType properties are set to appropriate values.

    chart-designer-series-template

Customize the Chart

To improve the chart’s appearance, perform the following customization.

  • By default, the name for each series is automatically generated by the chart based on its XRChart.SeriesDataMember property value. You can use the ChartControl.SeriesNameTemplate property to add some text to the beginning or to the end of each series name. For example, set the SeriesNameTemplate.BeginText property to “GSP in “.
  • To avoid overlapping series labels, set the SeriesBase.LabelsVisibility property to False.
  • Specify the color settings used to draw the chart’s series. For instance, in the drop-down Palette list, select Nature Colors.

Preview and Publish the Report

Your report is now ready to be generated. To view it, switch to the Preview tab in Visual Studio.

HowTo - AddChartOutput

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