Skip to main content

How to: Generate a Chart by its ViewModel

  • 17 minutes to read

The Chart Control can generate its child elements from their ViewModels. This is useful when the application uses the MVVM architecture and the Chart should contain several chart elements that are bound to data. You can bind the element’s ItemsSource to the View Model’s property to generate a chart element collection from a chart’s View Model. Then specify the element’s ItemTemplate or ItemTemplateSelector to bind the element’s properties to the element view model’s properties. For example, you can bind a chart’s legend collection to the view model’s legend collection using the ChartControlBase.LegendItemsSource and configure the generated legends using the ChartControlBase.LegendItemTemplate.

View Example

Imports System
Imports System.Collections.Generic
Imports System.Collections.ObjectModel
Imports System.Globalization
Imports System.IO
Imports System.Xml.Linq

Namespace MvvmSample.Model
    Friend Class WeatherInfo
        Private privateTimestamp As Date
        Public Property Timestamp() As Date
            Get
                Return privateTimestamp
            End Get
            Private Set(ByVal value As Date)
                privateTimestamp = value
            End Set
        End Property
        Private privateTemperature As Double
        Public Property Temperature() As Double
            Get
                Return privateTemperature
            End Get
            Private Set(ByVal value As Double)
                privateTemperature = value
            End Set
        End Property
        Private privatePressure As Integer
        Public Property Pressure() As Integer
            Get
                Return privatePressure
            End Get
            Private Set(ByVal value As Integer)
                privatePressure = value
            End Set
        End Property
        Private privateRelativeHumidity As Integer
        Public Property RelativeHumidity() As Integer
            Get
                Return privateRelativeHumidity
            End Get
            Private Set(ByVal value As Integer)
                privateRelativeHumidity = value
            End Set
        End Property

        Public Sub New(ByVal timestamp As Date, ByVal temperature As Double, ByVal pressure As Integer, ByVal relativeHumidity As Integer)
            Me.Timestamp = timestamp
            Me.Temperature = temperature
            Me.Pressure = pressure
            Me.RelativeHumidity = relativeHumidity
        End Sub
    End Class

    Friend Interface WeatherProvider
        ReadOnly Property WeatherInfos() As IEnumerable(Of WeatherInfo)
    End Interface

    Friend Class XmlWeatherProvider
        Implements WeatherProvider

        Private filename As String
        Public Sub New(ByVal filename As String)
            If File.Exists(filename) Then
                Me.filename = filename
            Else
                Throw New Exception(String.Format("The '{0}' file does not exist.", filename))
            End If
        End Sub

        Private infos As Collection(Of WeatherInfo)
        Public ReadOnly Property WeatherInfos() As IEnumerable(Of WeatherInfo) Implements WeatherProvider.WeatherInfos
            Get
                If infos Is Nothing Then
                    Dim doc As XDocument = XDocument.Load(filename)

                    infos = New Collection(Of WeatherInfo)()
                    For Each element As XElement In doc.Element("WeatherData").Elements("WeatherInfo")
                        infos.Add(New WeatherInfo(timestamp:= Date.Parse(element.Element("Timestamp").Value, CultureInfo.InvariantCulture), temperature:= Double.Parse(element.Element("Temperature").Value, CultureInfo.InvariantCulture), pressure:= Integer.Parse(element.Element("Pressure").Value, CultureInfo.InvariantCulture), relativeHumidity:= Integer.Parse(element.Element("RelativeHumidity").Value, CultureInfo.InvariantCulture)))
                    Next element
                End If
                Return infos
            End Get
        End Property
    End Class
End Namespace

Below is a list of properties that allow you to generate chart elements from view models:

Symbol Description
Annotations
ChartControl.AnnotationItemsSource Gets or sets the collection of objects used to generate annotations.
ChartControl.AnnotationItemTemplate Gets or sets the DataTemplate that specifies how to convert a model object to an annotation.
ChartControl.AnnotationItemTemplateSelector Gets or sets the custom logic for selecting a data template that converts a model object to an annotation.
Legends
ChartControlBase.LegendItemsSource Gets or sets the collection of objects used to generate legends.
ChartControlBase.LegendItemTemplate Gets or sets the DataTemplate that specifies how to convert a model object to a legend.
ChartControlBase.LegendItemTemplateSelector Gets or sets the custom logic for selecting a data template that converts a model object to a legend.
Series
Diagram.SeriesItemsSource Gets or sets the collection of objects used to generate series.
Diagram.SeriesItemTemplate Gets or sets the DataTemplate that specifies how to convert a model object to a series.
Diagram.SeriesItemTemplateSelector Gets or sets the custom logic for selecting a data template that converts a model object to a series.
Secondary Axes
XYDiagram2D.SecondaryAxisXItemsSource Gets or sets the collection used to generate secondary X-axes.
XYDiagram2D.SecondaryAxisXItemTemplate Gets or sets the DataTemplate that specifies how to convert a model object to a secondary X-axis.
XYDiagram2D.SecondaryAxisXItemTemplateSelector Gets or sets the custom logic for selecting a data template that converts a model object to a secondary X-axis.
XYDiagram2D.SecondaryAxisYItemsSource Gets or sets the collection used to generate secondary Y-axes.
XYDiagram2D.SecondaryAxisYItemTemplate Gets or sets the DataTemplate that specifies how to convert a model object to a secondary Y-axis.
XYDiagram2D.SecondaryAxisYItemTemplateSelector Gets or sets the custom logic for selecting a data template that converts a model object to a secondary Y-axis.
Panes
XYDiagram2D.PaneItemsSource Gets or sets the collection of objects used to generate panes.
XYDiagram2D.PaneItemTemplate Gets or sets the DataTemplate that specifies how to convert a model object to a pane.
XYDiagram2D.PaneItemTemplateSelector Gets or sets the custom logic for selecting a data template that converts a model object to a pane.
Custom Axis Labels
Axis2D.CustomLabelItemsSource Gets or sets the collection used to generate custom labels.
Axis2D.CustomLabelItemTemplate Gets or sets the DataTemplate that specifies how to convert a model object to a custom label.
Axis2D.CustomLabelItemTemplateSelector Gets or sets the custom logic for selecting a data template that converts a model object to a custom label.
Constant Lines
Axis2D.ConstantLineBehindItemsSource Gets or sets the collection of objects used to generate constant lines that are positioned behind series.
Axis2D.ConstantLineBehindItemTemplate Gets or sets the DataTemplate that specifies how to convert a model object to a constant line that is positioned behind series.
Axis2D.ConstantLineBehindItemTemplateSelector Gets or sets the custom logic for selecting a data template that converts a model object to a constant line positioned behind series.
Axis2D.ConstantLineInFrontItemsSource Gets or sets the collection of objects used to generate constant lines that are positioned in front of series.
Axis2D.ConstantLineInFrontItemTemplate Gets or sets the DataTemplate that specifies how to convert a model object to a constant line that is positioned in front of series.
Axis2D.ConstantLineInFrontItemTemplateSelector Gets or sets the custom logic for selecting a data template that converts a model object to a constant line positioned in front of series.
Strips
Axis2D.StripItemsSource Gets or sets the collection of objects used to generate strips.
Axis2D.StripItemTemplate Gets or sets the DataTemplate that specifies how to convert a model object to a strip.
Axis2D.StripItemTemplateSelector Gets or sets the custom logic for selecting a data template that converts a model object to a strip.
Scale Breaks
Axis2D.ScaleBreakItemsSource Gets or sets the collection of objects used to generate scale breaks.
Axis2D.ScaleBreakItemTemplate Gets or sets the DataTemplate that specifies how to convert a model object to a scale break.
Axis2D.ScaleBreakItemTemplateSelector Gets or sets the custom logic for selecting a data template that converts a model object to a scale break.
Visibility in Panes
Axis2D.VisibilityInPaneItemsSource Gets or sets the collection of objects used to generate the axis’s VisibilityInPane items.
Axis2D.VisibilityInPaneItemTemplate Gets or sets the DataTemplate that specifies how to convert a model object to a VisibilityInPane object.
Axis2D.VisibilityInPaneItemTemplateSelector Gets or sets the custom logic for selecting a data template that converts a model object to a VisibilityInPane object.
Indicators
XYSeries2D.IndicatorItemsSource Gets or sets the collection of objects used to generate series’ indicators.
XYSeries2D.IndicatorItemTemplate Gets or sets the DataTemplate that specifies how to convert a model object to an indicator.
XYSeries2D.IndicatorItemTemplateSelector Gets or sets the custom logic for selecting a data template that converts a model object to an indicator.
Custom Legend Items
LegendBase.CustomItemsSource Gets or sets the collection of objects used to generate custom legend items.
LegendBase.CustomItemTemplate Gets or sets the DataTemplate that specifies how to convert a model object to a custom legend item.
LegendBase.CustomItemTemplateSelector Gets or sets the custom logic for selecting a data template that converts a model object to a legend custom item.