How to: Bind a Chart to an Observable Collection

Aug 01, 2018
2 minutes to read

This example illustrates how to create a Pie chart bound to an observable collection.

Click the button to add points to the existing collection, and see how the chart changes automatically.

MainWindow.xaml
MainWindow.xaml.cs
MainWindow.xaml.vb

xaml

<Window x:Class="PieBindingToObservableCollection.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
        xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
        xmlns:local="clr-namespace:PieBindingToObservableCollection"
        Title="MainWindow" Height="350" Width="525"
        DataContext="{dxmvvm:ViewModelSource Type=local:ViewModel}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Command="{Binding AddPointCommand}" Content="Add Point" />
        <dxc:ChartControl Grid.Row="1">
            <dxc:ChartControl.Diagram>
                <dxc:SimpleDiagram2D>
                    <dxc:SimpleDiagram2D.Series>
                        <dxc:PieSeries2D ArgumentDataMember="X" ValueDataMember="Y" DataSource="{Binding Path=PointsCollection}" />
                    </dxc:SimpleDiagram2D.Series>
                </dxc:SimpleDiagram2D>
            </dxc:ChartControl.Diagram>
        </dxc:ChartControl>
    </Grid>
</Window>

csharp

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

namespace PieBindingToObservableCollection {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
    }

    public class ViewModel {
        public ObservableCollection<Point> PointsCollection { get; private set; }

        public ViewModel() {
            PointsCollection = new ObservableCollection<Point> { new Point(1, 1), new Point(2, 2), new Point(3, 3) };
        }

        public void AddPoint() {
            PointsCollection.Add(new Point(1, 1));
        }
    }
}

Imports System.Windows
Imports System.Collections.ObjectModel
' ...

Namespace PieBindingToObservableCollection
    Partial Public Class MainWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class

    Public Class ViewModel
        Private privatePointsCollection As ObservableCollection(Of Point)
        Public Property PointsCollection() As ObservableCollection(Of Point)
            Get
                Return privatePointsCollection
            End Get
            Private Set(ByVal value As ObservableCollection(Of Point))
                privatePointsCollection = value
            End Set
        End Property

        Public Sub New()
            PointsCollection = New ObservableCollection(Of Point) From { _
                New Point(1, 1), _
                New Point(2, 2), _
                New Point(3, 3) _
            }
        End Sub

        Public Sub AddPoint()
            PointsCollection.Add(New Point(1, 1))
        End Sub
    End Class
End Namespace