Lesson 3 - Use a Series Template for Auto-Created Series
- 4 minutes to read
This lesson demonstrates how to add a series template to a chart diagram, and bind this template to a datasource. To learn how to manually generate series from a datasource, refer to the Lesson 1 - Bind Chart Series to Data tutorial.
Note that although in this tutorial you will use the Microsoft Access database (.mdb), the ChartControl can be bound to a variety of other data providers. For more information on data binding, refer to the Providing Data section of the Chart control documentation.
To create a data-bound charting application, do the following.
- Step 1. Create a New Project and Add a Chart Control
- Step 2. Create Data Objects
- Step 3. Bind the Chart to a Datasource
- Result
Step 1. Create a New Project and Add a Chart Control
- Run MS Visual Studio.
- Create a new WPF Application project.
- Add the ChartControl component to your project, as you did in Lesson 1 - Bind Chart Series to Data (see step 1).
Step 2. Create Data Objects
In the step below, you will bind the ChartControl to the GSP database. The chart will represent this table as bars. To perform design-time data binding, the Items Source Configuration Wizard is used. The Wizard automatically generates the data binding code in XAML. To add a datasource to a WPF application, proceed with the following steps.
Locate the ChartControl in the form designer and click its smart-tag. Then, in the ChartControl actions list, click the Data Source Wizard to invoke the wizard.
Select the ADO.NET Typed DataSet data technology and click the New Data Source… button.
A message box that notifies you of the necessity to rebuild the solution and reopen the Items Source Configuration Wizard appears.
Click Ok to run the Data Source Configuration Wizard.
The Data Source Configuration Wizard appears.
Leave the Database item as is and click Next.
In the next wizard page, leave the database model as a Dataset and click Next.
On the Choose Your Data Connection page, click New Connection… to create a connection to a database.
This invokes the Add Connection dialog.
Leave the Microsoft Access Database File as your data source. Then, click the Browse… button and specify the gsp.mdb database as your data connection. By default, it is stored in the following path.
C:\Users\Public\Documents\DevExpress Demos 24.1\Components\Data
Click OK to close the dialog and then click Next in the wizard.
This invokes a message box that asks whether to copy the database file to the project and modify the connection.
Click Yes, as shown below.
In the next wizard page, you can choose whether to save the connection settings to the application configuration file or not.
Make sure that the Yes, save the connection as: check box is checked and click Next.
Expand the Tables list and select the GSP item. (Make sure that only this item is selected.)
- Click Finish to close the Data Source Configuration Wizard.
Step 3. Bind the Chart to a Datasource
To bind the ChartControl to a data source, do the following.
Rebuild the solution and open the Items Source Configuration Wizard, as you did in step 2. The newly created data source will be displayed within the Data Sources section. Click Next.
Select Simple Binding to bind the control to a plain collection of data objects and click Next.
Select the GSP table and click Finish.
You will need to remove the BarSideBySideSeries2D series from the diagram (this series was created automatically in step 1), because the series template will instead be bound to a datasource in this lesson.
To do this, locate the ellipsis button for the Diagram.Series property, and click it. In the invoked Series Collection Editor: Series dialog, remove the BarSideBySideSeries2D object and click OK.
- Locate the Diagram.SeriesTemplate property and set it to BarSideBySideSeries2D.
To specify a data field for as many series to be auto-created as there are records in this field, locate the XYDiagram2D object’s Diagram.SeriesDataMember property and set its value to Year.
Next, set the name of the data field that contains the arguments of series template points. For this, set the Series.ArgumentDataMember property to Region.
To specify the name of the data field that contains the values of series template points, set the Series.ValueDataMember property to GSP.
Result
The final XAML is shown below.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
xmlns:gspDataSetTableAdapters="clr-namespace:Charts_Lesson4.gspDataSetTableAdapters"
xmlns:local="clr-namespace:Charts_Lesson4"
xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" x:Class="Charts_Lesson4.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<dx:TypedSimpleSource x:Key="TypedSimpleSource" AdapterType="{x:Type gspDataSetTableAdapters:GSPTableAdapter}"
ContextType="{x:Type local:gspDataSet}" Path="GSP">
<dx:DesignDataManager.DesignData>
<dx:DesignDataSettings RowCount="5"/>
</dx:DesignDataManager.DesignData>
</dx:TypedSimpleSource>
</Window.Resources>
<Grid>
<dxc:ChartControl DataSource="{Binding Data, Source={StaticResource TypedSimpleSource}}">
<dxc:ChartControl.Legend>
<dxc:Legend/>
</dxc:ChartControl.Legend>
<dxc:XYDiagram2D SeriesDataMember="Year">
<dxc:XYDiagram2D.SeriesTemplate>
<dxc:BarSideBySideSeries2D ArgumentDataMember="Region" ValueDataMember="GSP"/>
</dxc:XYDiagram2D.SeriesTemplate>
</dxc:XYDiagram2D>
</dxc:ChartControl>
</Grid>
</Window>
Run the project. The following image shows the resulting chart at runtime.
