Skip to main content

VCL Charts: Line View Tutorial. Step 2. Bind Series to Data

  • 3 minutes to read

The previous step explained how to add a Chart control, apply a skin to the application, and create empty line series at design time. This step describes how to populate a memory-based dataset, configure a data source, and bind created series to dataset fields.

VCL Chart Control: Line View Tutorial. Step 2 - Result

Add a Dataset and Populate It

Add a TdxMemData component to the form. This component is a memory-based dataset that you can link to a data-aware control or a Chart control series in bound data access mode.

Change the component’s name to mdPopulation.

Right-click the component and select Persistent Editor… in the context menu to invoke the dialog that allows you to manage dataset fields and records.

VCL Chart Control: Line View Tutorial. Step 2 - The TdxMemData Component Context Menu

Follow the steps below to populate the dataset:

  1. Click Get Fields to load dataset fields from a file. Locate the Population.dat file installed with DevExpress Demos. The default installation path is C:\Users\Public\Documents\DevExpress\VCL\Demos\ExpressCharts\Data\.
  2. Click Load… to populate dataset fields with data. Select the same file in the opened dialog.

Note

You need to install demos to use demo datasets.

The following image demonstrates the populated memory-based dataset:

VCL Chart Control: Line View Tutorial. Step 2 - The Populated TdxMemData Component

Click OK to apply changes and close the Persistent Editor.

Set the TdxMemData component’s Active property to True to allow a bound control to interact with stored data.

VCL Chart Control: Line View Tutorial. Step 2 - Activate the TdxMemData Component

Bind Series to a Data Source

Add a TDataSource component that allows you to bind a dataset to a Chart series. Rename the component dsPopulation.

Configure the Data Source

Set the component’s DataSet property to mdPopulation to link the data source component to the previously populated memory-based dataset.

VCL Chart Control: Line View Tutorial. Step 2 - Associate the Data Source with the Memory-Based Dataset

Bind a Series to the Data Source

Double-click the Chart control to invoke the Chart Designer dialog.

VCL Chart Control: Line View Tutorial. Step 2 - The Chart Designer Dialog

Select dxChartControl1XYSeries1 and rename it to PopulationEurope.

Set the DataBinding property to DB.

VCL Chart Control: Line View Tutorial. Step 2 - Enable Bound Mode

Expand the DataBinding node in the Object Inspector and assign the dsPopulation data source to the DataSource property.

VCL Chart Control: Line View Tutorial. Step 2 - Assign a Data Source to the Series

Expand the ArgumentField node and set the FieldName property to Year.

VCL Chart Control: Line View Tutorial. Step 2 - Assign the Argument Field

Expand the ValueField node and set the FieldName property to Europe.

VCL Chart Control: Line View Tutorial. Step 2 - Assign the Value Field

As a result, the Chart control displays the PopulationEurope series. Note that the chart legend automatically displays the corresponding dataset field name as a series caption.

VCL Chart Control: Line View Tutorial. Step 2 - The Europe Series is Visible

Bind Remaining Series to Data

Bind the remaining two series to data in the same manner as PopulationEurope:

  1. Rename dxChartControl1XYSeries2 to PopulationAmericas.
  2. Rename dxChartControl1XYSeries3 to PopulationAfrica.
  3. Set the DataBinding property of PopulationAmericas to DB.
  4. Assign the dsPopulation data source component to the DataBinding.DataSource property.
  5. Set the DataBinding.ArgumentField.FieldName property to Year.
  6. Set the DataBinding.ValueField.FieldName property to Americas.
  7. Repeat steps 3-5 for the PopulationAfrica series.
  8. Set the DataBinding.ValueField.FieldName property of the PopulationAfrica series to Africa.

The Chart control displays three line series as a result.

VCL Chart Control: Line View Tutorial. Step 2 - Three Line Series with the Default Appearance Settings

Note

You can press Ctrl+H to hide non-visual components that can overlap form content at design time.

Result

The Chart control displays three line series with the default appearance settings. The chart legend displays the corresponding dataset field names.

VCL Chart Control: Line View Tutorial. Step 2 - Result

Next Step

The next step describes how to add and configure optional visual chart elements and customize series appearance.

See Also