Lesson 1 - Bind Chart Series to Data | WPF Controls

Oct 08, 2024
6 minutes to read

This lesson explains how to add a series to a chart’s diagram, bind this series to a data source, and configure basic chart options.

Step 1. Create a New Project and Add a Chart

Run Microsoft Visual Studio.
Create a new WPF Application project. Name it Lesson1BindChartToData.
Drag the ChartControl component from the DX.24.2: Data & Analytics toolbox section to the Main Window.
Right-click the ChartControl and select Layout | Reset All in the context menu to make the chart fill the entire window.

The MainWindow markup should appear as follows:

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Lesson1BindChartToData"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        x:Class="Lesson1BindChartToData.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="315" Width="560">
    <Grid>
        <dxc:ChartControl/>
    </Grid>
</Window>

References to the following libraries are automatically added to the project:

DevExpress.Data.v24.2
DevExpress.Xpf.Core.v24.2
DevExpress.Charts.v24.2.Core
DevExpress.Xpf.Charts.v24.2
DevExpress.Mvvm.v24.2
DevExpress.Xpf.Printing.v24.2
DevExpress.Printing.v24.2.Core

Note

The references come from the Global Assembly Cache (GAC). To copy them locally or include them later in your product’s installation, use the following directory:

C:\Program Files\DevExpress 24.2\Components\Bin\Framework\

Step 2. Prepare a Data Model

You can bind the chart to a database, to an XML file, or to data created at runtime. The data source should implement the IEnumerable or IListSource interface, or their descendants. Refer to the Providing Data section for more information about how to populate a chart with data.

In this topic, you bind a chart to an ObservableCollection<T>. Use the DataPoint class implementation to develop a Data Model:

C#
VB.NET

using System.Collections.ObjectModel;
using System.Windows;

namespace Lesson1BindChartToData {
    public class DataPoint {
        public string Argument { get; set; }
        public double Value { get; set; }
        public static ObservableCollection<DataPoint> GetDataPoints() {
            return new ObservableCollection<DataPoint> {
                    new DataPoint { Argument = "Asia", Value = 5.289D},
                    new DataPoint { Argument = "Australia", Value = 2.2727D},
                    new DataPoint { Argument = "Europe", Value = 3.7257D},
                    new DataPoint { Argument = "North America", Value = 4.1825D},
                    new DataPoint { Argument = "South America", Value = 2.1172D}
                   };
        }
    }
}

Imports System.Collections.ObjectModel
Imports System.Windows

Namespace Lesson1BindChartToData
    Public Class DataPoint
        Public Property Argument() As String
        Public Property Value() As Double
        Public Shared Function GetDataPoints() As ObservableCollection(Of DataPoint)
            Return New ObservableCollection(Of DataPoint) From {
                New DataPoint With {
                    .Argument = "Asia",
                    .Value = 5.289R
                },
                New DataPoint With {
                    .Argument = "Australia",
                    .Value = 2.2727R
                },
                New DataPoint With {
                    .Argument = "Europe",
                    .Value = 3.7257R
                },
                New DataPoint With {
                    .Argument = "North America",
                    .Value = 4.1825R
                },
                New DataPoint With {
                    .Argument = "South America",
                    .Value = 2.1172R
                }
            }
        End Function
    End Class
End Namespace

Step 3. Add a ViewModel

Implement the MainWindowViewModel class with the following code snippet:

C#
VB.NET

using System.Collections.ObjectModel;
using System.Windows;

namespace Lesson1BindChartToData {
    public class MainWindowViewModel {
        public ObservableCollection<DataPoint> Data { get; private set; }
        public MainWindowViewModel() {
            this.Data = DataPoint.GetDataPoints();
        }
    }
}

Imports System.Collections.ObjectModel
Imports System.Windows

Namespace Lesson1BindChartToData

    Public Class MainWindowViewModel
        Private privateData As ObservableCollection(Of DataPoint)
        Public Property Data() As ObservableCollection(Of DataPoint)
            Get
                Return privateData
            End Get
            Private Set(ByVal value As ObservableCollection(Of DataPoint))
                privateData = value
            End Set
        End Property
        Public Sub New()
            Me.Data = DataPoint.GetDataPoints()
        End Sub
    End Class
End Namespace

Step 4. Specify the Data Context

Build the solution. Click the MainWindow’s smart tag and specify the DataContext property as shown below:

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Lesson1BindChartToData"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        x:Class="Lesson1BindChartToData.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="315" Width="560">
    <Window.DataContext>
        <local:MainWindowViewModel/>
    </Window.DataContext>
    <Grid>
        <dxc:ChartControl/>
    </Grid>
</Window>

Step 5. Bind the Chart to Data

Click the Chart Control’s smart tag. Specify the ChartControl.DataSource property as shown in the following image:

The DataSource property appears in the markup:

<dxc:ChartControl DataSource="{Binding Data}"/>

Step 6. Specify the Chart Type

In the Chart Control’s smart tag menu, set the ChartControl.Diagram property to the XYDiagram2D type and add a legend and a title.

Specify the BarSideBySideSeries2D series view type in the XYDiagram2D‘s smart tag:

The following properties appear in the markup:

<dxc:ChartControl DataSource="{Binding Data}" >
    <dxc:ChartControl.Titles>
        <dxc:Title Content="Title"/>
    </dxc:ChartControl.Titles>
    <dxc:ChartControl.Legends>
        <dxc:Legend/>
    </dxc:ChartControl.Legends>
    <dxc:XYDiagram2D>
        <dxc:BarSideBySideSeries2D/>
    </dxc:XYDiagram2D>
</dxc:ChartControl>

Step 7. Populate the Series with Data

Specify the data source fields that supply values for series point arguments and values.

Set the Series.ArgumentDataMember property to Argument.
Set the Series.ValueDataMember property to Value.

The following properties appear in the markup:

<dxc:XYDiagram2D>
    <dxc:BarSideBySideSeries2D ArgumentDataMember="Argument" ValueDataMember="Value"/>
</dxc:XYDiagram2D>

Step 7. Customize the Chart

Specify the Series Name

Set the Series.DisplayName property to Annual Statistics. The display name identifies the series in the legend.

Customize the Chart Title

In the Title’s property grid, set the TitleBase.HorizontalAlignment property to Center. Define TitleBase.Content as Sales by Regions and click OK.

Configure the Crosshair Cursor’s Options

To customize the crosshair options, click the ChartControl.CrosshairOptions property’s New button to create a CrosshairOptions instance. Enable the following properties:

Set XYSeries2D.CrosshairLabelPattern to ${V:f2}M.

Results

Run the project to see the results.

The resulting code appears as follows:

Markup

XAML

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:local="clr-namespace:Lesson1BindChartToData" 
    xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
    x:Class="Lesson1BindChartToData.MainWindow"
    mc:Ignorable="d" Title="MainWindow" Height="400" Width="650">
    <Window.DataContext>
        <local:MainWindowViewModel/>
    </Window.DataContext>
    <Grid>
        <dxc:ChartControl DataSource="{Binding Data}">
            <dxc:ChartControl.CrosshairOptions>
                <dxc:CrosshairOptions ShowArgumentLabels="True" 
                                      ShowValueLabels="True" 
                                      ShowValueLine="True"/>
            </dxc:ChartControl.CrosshairOptions>
            <dxc:ChartControl.Titles>
                <dxc:Title Content="Sales by Regions" 
                           HorizontalAlignment="Center"/>
            </dxc:ChartControl.Titles>
            <dxc:ChartControl.Legends>
                <dxc:Legend/>
            </dxc:ChartControl.Legends>
            <dxc:XYDiagram2D>
                <dxc:BarSideBySideSeries2D DisplayName="Annual Statistics" 
                                           ArgumentDataMember="Argument" 
                                           ValueDataMember="Value" 
                                           CrosshairLabelPattern="${V:f2}M"/>
            </dxc:XYDiagram2D>
        </dxc:ChartControl>
    </Grid>
</Window>

Code-Behind

C#
VB.NET

using System.Collections.ObjectModel;
using System.Windows;
namespace Lesson1BindChartToData {
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
    }
    public class MainWindowViewModel {
        public ObservableCollection<DataPoint> Data { get; private set; }
        public MainWindowViewModel() {
            this.Data = DataPoint.GetDataPoints();
        }
    }
    public class DataPoint {       
        public string Argument { get; set; }
        public double Value { get; set; }
        public static ObservableCollection<DataPoint> GetDataPoints() {
            return new ObservableCollection<DataPoint> {
                    new DataPoint { Argument = "Asia", Value = 5.289D},
                    new DataPoint { Argument = "Australia", Value = 2.2727D},
                    new DataPoint { Argument = "Europe", Value = 3.7257D},
                    new DataPoint { Argument = "North America", Value = 4.1825D},
                    new DataPoint { Argument = "South America", Value = 2.1172D}
                   };
        }
    }
}

Imports System.Collections.ObjectModel
Imports System.Windows
Namespace Lesson1BindChartToData
    ''' <summary>
    ''' Interaction logic for MainWindow.xaml
    ''' </summary>
    Partial Public Class MainWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
    Public Class MainWindowViewModel
        Private privateData As ObservableCollection(Of DataPoint)
        Public Property Data() As ObservableCollection(Of DataPoint)
            Get
                Return privateData
            End Get
            Private Set(ByVal value As ObservableCollection(Of DataPoint))
                privateData = value
            End Set
        End Property
        Public Sub New()
            Me.Data = DataPoint.GetDataPoints()
        End Sub
    End Class
    Public Class DataPoint
        Public Property Argument() As String
        Public Property Value() As Double
        Public Shared Function GetDataPoints() As ObservableCollection(Of DataPoint)
            Return New ObservableCollection(Of DataPoint) From {
                New DataPoint With {
                    .Argument = "Asia",
                    .Value = 5.289R
                },
                New DataPoint With {
                    .Argument = "Australia",
                    .Value = 2.2727R
                },
                New DataPoint With {
                    .Argument = "Europe",
                    .Value = 3.7257R
                },
                New DataPoint With {
                    .Argument = "North America",
                    .Value = 4.1825R
                },
                New DataPoint With {
                    .Argument = "South America",
                    .Value = 2.1172R
                }
            }
        End Function
    End Class
End Namespace

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Lesson 1 - Bind Chart Series to Data

Step 1. Create a New Project and Add a Chart

Step 2. Prepare a Data Model

Step 3. Add a ViewModel

Step 4. Specify the Data Context

Step 5. Bind the Chart to Data

Step 6. Specify the Chart Type

Step 7. Populate the Series with Data

Step 7. Customize the Chart

Specify the Series Name

Customize the Chart Title

Configure the Crosshair Cursor’s Options

Results