How to: Bind Series to View Models Using the Item Template

• Jun 07, 2019
• 4 minutes to read

This example demonstrates how to bind series view models to a chart. Note that you can bind secondary axes and custom labels using the same approach.

To bind series view models to a chart, use the Diagram.SeriesItemsSource property. To configure how the series view model is converted to a series on a chart, use Diagram.SeriesItemTemplate or Diagram.SeriesItemTemplateSelector. In this example, the Template is used to generate identical series.

View Example

GdpSeries.vb

Public Class GdpSeries
    Public Property CountryName() As String
    Public Property Values() As IEnumerable(Of Gdp)
End Class

Public Class Gdp
    Public Property Year() As Integer
    Public Property Value() As Double
End Class

MainWindow.xaml

<dxc:ChartControl>
    <dxc:ChartControl.Legends>
        <dxc:Legend HorizontalPosition="Left" VerticalPosition="Top" Orientation="Horizontal"/>
    </dxc:ChartControl.Legends>
    <dxc:XYDiagram2D SeriesItemsSource="{Binding GdpSeries}">
        <dxc:XYDiagram2D.SeriesItemTemplate>
            <DataTemplate>
                <dxc:LineSeries2D DisplayName="{Binding CountryName}"
                                  DataSource="{Binding Values}"
                                  ArgumentDataMember="Year"
                                  ValueDataMember="Value"/>
            </DataTemplate>
        </dxc:XYDiagram2D.SeriesItemTemplate>
    </dxc:XYDiagram2D>
</dxc:ChartControl>

ChartViewModel.vb

Public Class ChartViewModel
    Private privateGdpSeries As IEnumerable(Of GdpSeries)
    Public Property GdpSeries() As IEnumerable(Of GdpSeries)
        Get
            Return privateGdpSeries
        End Get
        Private Set(ByVal value As IEnumerable(Of GdpSeries))
            privateGdpSeries = value
        End Set
    End Property

    Public Sub New()
        GdpSeries = New Collection(Of GdpSeries) From { _
            New GdpSeries With { _
                .CountryName = "USA", .Values = New Collection(Of Gdp) From { _
                    New Gdp With {.Year = 2015, .Value = 18.037}, _
                    New Gdp With {.Year = 2014, .Value = 17.393}, _
                    New Gdp With {.Year = 2013, .Value = 16.692}, _
                    New Gdp With {.Year = 2012, .Value = 16.155}, _
                    New Gdp With {.Year = 2011, .Value = 15.518}, _
                    New Gdp With {.Year = 2010, .Value = 14.964}, _
                    New Gdp With {.Year = 2009, .Value = 14.419}, _
                    New Gdp With {.Year = 2008, .Value = 14.719} _
                } _
            }, _
            New GdpSeries With { _
                .CountryName = "China", .Values = New Collection(Of Gdp) From { _
                    New Gdp With {.Year = 2015, .Value = 11.065}, _
                    New Gdp With {.Year = 2014, .Value = 10.482}, _
                    New Gdp With {.Year = 2013, .Value = 9.607}, _
                    New Gdp With {.Year = 2012, .Value = 8.561}, _
                    New Gdp With {.Year = 2011, .Value = 7.573}, _
                    New Gdp With {.Year = 2010, .Value = 6.101}, _
                    New Gdp With {.Year = 2009, .Value = 5.11}, _
                    New Gdp With {.Year = 2008, .Value = 4.598} _
                } _
            }, _
            New GdpSeries With { _
                .CountryName = "Japan", .Values = New Collection(Of Gdp) From { _
                    New Gdp With {.Year = 2015, .Value = 4.383}, _
                    New Gdp With {.Year = 2014, .Value = 4.849}, _
                    New Gdp With {.Year = 2013, .Value = 5.156}, _
                    New Gdp With {.Year = 2012, .Value = 6.203}, _
                    New Gdp With {.Year = 2011, .Value = 6.157}, _
                    New Gdp With {.Year = 2010, .Value = 5.7}, _
                    New Gdp With {.Year = 2009, .Value = 5.231}, _
                    New Gdp With {.Year = 2008, .Value = 5.038} _
                } _
            } _
        }
    End Sub
End Class

ChartViewModel.cs

public class ChartViewModel {
    public IEnumerable<GdpSeries> GdpSeries { get; private set; }

    public ChartViewModel() {
        GdpSeries = new Collection<GdpSeries> {
            new GdpSeries {
                CountryName = "USA",
                Values = new Collection<Gdp> {
                    new Gdp { Year = 2015, Value = 18.037},
                    new Gdp { Year = 2014, Value = 17.393},
                    new Gdp { Year = 2013, Value = 16.692},
                    new Gdp { Year = 2012, Value = 16.155},
                    new Gdp { Year = 2011, Value = 15.518},
                    new Gdp { Year = 2010, Value = 14.964},
                    new Gdp { Year = 2009, Value = 14.419},
                    new Gdp { Year = 2008, Value = 14.719}
                }
            },
            new GdpSeries {
                CountryName = "China",
                Values = new Collection<Gdp> {
                    new Gdp { Year = 2015, Value = 11.065},
                    new Gdp { Year = 2014, Value = 10.482},
                    new Gdp { Year = 2013, Value = 9.607},
                    new Gdp { Year = 2012, Value = 8.561},
                    new Gdp { Year = 2011, Value = 7.573},
                    new Gdp { Year = 2010, Value = 6.101},
                    new Gdp { Year = 2009, Value = 5.11},
                    new Gdp { Year = 2008, Value = 4.598}
                }
            },
            new GdpSeries {
                CountryName = "Japan",
                Values = new Collection<Gdp> {
                    new Gdp { Year = 2015, Value = 4.383},
                    new Gdp { Year = 2014, Value = 4.849},
                    new Gdp { Year = 2013, Value = 5.156},
                    new Gdp { Year = 2012, Value = 6.203},
                    new Gdp { Year = 2011, Value = 6.157},
                    new Gdp { Year = 2010, Value = 5.7},
                    new Gdp { Year = 2009, Value = 5.231},
                    new Gdp { Year = 2008, Value = 5.038}
                }
            }
        };
    }
}

GdpSeries.cs

public class GdpSeries {
    public String CountryName { get; set; }
    public IEnumerable<Gdp> Values { get; set; }
}

public class Gdp {
    public int Year { get; set; }
    public double Value { get; set; }
}