wpf-118934-controls-and-libraries-charts-suite-chart-control-examples-providing-data-how-to-bind-series-to-view-models-using-the-item-template.md
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.
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
<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>
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
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}
}
}
};
}
}
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; }
}