Lesson 3 - Bind Chart Series to Data

  • 6 minutes to read

This tutorial demonstrates how to bind a chart to an external SQL data source in the Data Source Configuration Wizard, add a series to the chart, and adjust data bindings of the series.

Note

Refer to the following article for more information on how to connect a chart to different data source types: Data Source Wizard.

Follow the steps below to bind the chart to data and specify its series:

Prerequisites

Microsoft Visual Studio 2012, 2013, 2015, 2017 or 2019.

Create a Chart and Bind it to Data

  1. Run Microsoft Visual Studio.

  2. Create a new Windows Forms Application or open an existing one.

  3. From the DX.21.2: Data & Analytics toolbox tab, drop the ChartControl onto the form.

    HowTo_AddChartControl01.png

    The Chart Designer is invoked once you drop the Chart control on the form. You can disable the Chart Designer‘s “Display a wizard every time a new chart is added” option to not show this dialog. Click Cancel to close the Chart Designer.

    To fill an entire form with the chart, click its smart tag, and select Dock in Parent Container in the invoked action list.

  4. To define a data source for the chart, click its smart tag, and select Data Source Wizard.

    invoke data source wizard

    The Data Source Configuration Wizard appears where you can specify a data source.

    Note

    You can also use the Visual Studio Data Source Configuration Wizard to connect a chart series to a database. Refer to the following article for more information: How to: Bind Individual Chart Series to Data at Design Time.

  5. On the Wizard’s first page, select SQL Data Connection and click New Data Source… in the Data Sources window.

    select data source type

    The following message appears:

    additionally configure connection message

  6. On this page, click No to create a new data connection.

    create a new data connection

  7. Select the data provider and specify connection parameters. In the Database field, specify the following path to the Northwind database file:

    C:\Users\Public\Documents\DevExpress Demos 21.2\Components\Data\nwind.mdb

    specify connection parameters

  8. Click Next on the following page to save the created connection string to the configuration file.

    save connection parameters

  9. On this page, you can construct an SQL query to obtain data from the database, specify a custom query, or select a stored procedure.

    create an sql query

    Click the Run Query Builder… button to invoke the Query Builder. The Query Builder allows you to configure the resulting SQL query.

  10. Double-click or drag the Products table from the Tables pane onto the Diagram pane. Use the checkbox to include CategoryID, UnitPrice and ProductName fields in the resulting query.

    querybuilder-specify-resulting-query

    After you constructed the query in the Query Builder, the query string is passed to the Data Source wizard.

    specify-sql-queries

    Click Finish to create the data source.

As a result, Visual Studio generates a set of classes for data management within the project.

  • sqlDataSource1 is a SqlDataSource instance (a collection of tables, relationships, and constraints) that contains tables from the Northwind database.
  • productsBindingSource is a BindingSource component, used to simplify data binding to sqlDataSource1. The data source is assigned to the ChartControl.DataSource property.

The sqlDataSource1 object’s fill method is automatically generated to load data from the data base.

The chart is bound to data. If you need to update connection parameters, open the sqlDataSource1 component’s smart tag menu:

sql-data-source-smart-tag-verbs

The next steps specify which data fields should be used to supply data for a chart series.

Specify a Series

  1. Add series to the chart. Click the chart’s smart tag and choose the Series… link in the invoked action list.

    Lesson3_ClickSeries

  2. In the invoked Series Collection Editor, click Add…, and select the Bar view.

    Lesson3_ChooseSeriesView

    Once you create a series, the chart displays automatically generated data for a series preview until you run the application.

  3. Switch to the Properties tab of the editor’s window and do the following:

    Lesson3_SpecifySeries1Properties

    Note

    If a series uses the chart control’s data source, it is not necessary to define the Series.DataSource property because a series inherits the chart control’s data source settings. Specify this property when a series uses a different data source.

  4. Filter data in the series. To do this, click the SeriesBase.FilterCriteria property’s ellipsis button.

    In the invoked Filter UI Editor, click the plus button to add a new condition. Set the column name to CategoryID, the criteria operator to Equals, and the operand value to 4.

    Lesson3_DataFilterCollectionEditor

Customize the Chart

Adjust the following options:

Adjust the Series-View-Specific Options

You can color each Bar individually in the created series. To achieve this, select the series and in the Properties grid, expand its SeriesBase.View property. Locate and enable the SeriesViewColorEachSupportBase.ColorEach property among the set of the view type-specific options.

Then, invoke the pattern editor for the SeriesBase.LegendTextPattern property of the series. Set the property value to {A}: {V} to show both arguments and values in legend rows.

Adjust the Legend

Each data point is a separate item on the chart’s legend. The item displays a pair of point arguments and their values. To better position the legend, select it first. Then, set the LegendBase.Direction to LeftToRight, LegendBase.AlignmentHorizontal to Center, and LegendBase.AlignmentVertical to BottomOutside in the Properties grid.

Add the Chart Title

To create the chart’s title, click the ellipsis button for the ChartControl.Titles property in the chart’s Properties grid. Then, click Add in the invoked editor to generate a new title. Specify the Title.Text property value (“Product Prices Comparison” in this example) and other options.

Adjust the Series Point Labels

To show the series labels, enable the SeriesBase.LabelsVisibility property.

Adjust the Crosshair Cursor Options

Crosshair cursor labels and a crosshair argument line are displayed on the chart. You can use the ChartControl.CrosshairEnabled property to disable or enable a crosshair cursor at the chart’s level, and the SeriesBase.CrosshairEnabled property to do the same at the series level.

To show crosshair cursor value lines and crosshair cursor axis labels, set the CrosshairOptions.ShowValueLine, CrosshairOptions.ShowValueLabels, and CrosshairOptions.ShowArgumentLabels properties to true.

Get the Result

Run the application to see the result:

Lesson3_Result

More Examples

How to: Bind Individual Chart Series to Data at Run Time
This tutorial explains how to bind each chart series to an individual data source in code.
How to: Bind Individual Chart Series to Data at Design Time
This tutorial explains how to bind each chart series to an individual data source at design time.
How to: Specify Series Data Members
This tutorial describes how to specify a data source for a created series, and automatically populate series points based on the data source table.
See Also