How to: Create a Real-Time Chart (MVVM)

• May 29, 2020
• 3 minutes to read

The following example creates a chart and updates its data source in real time.

The example uses an ObservableCollection as the data source for a series. ObservableCollection notifies the chart about new items and the chart is rendered again.

View Example

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:RealtimeChartMvvm"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        x:Class="RealtimeChartMvvm.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <dxc:ChartControl x:Name="chart" BoundDataChanged="chart_BoundDataChanged">
            <dxc:ChartControl.DataContext>
                <local:ChartViewModel/>
            </dxc:ChartControl.DataContext>
            <dxc:XYDiagram2D x:Name="diagram" 
                             DependentAxesYRange="True">
                <dxc:SplineSeries2D DisplayName="Series 1" 
                                  DataSource="{Binding DataPoints}" 
                                  ArgumentDataMember="Argument"
                                  ValueDataMember="Value" >
                    <dxc:SplineSeries2D.LastPoint>
                        <dxc:SidePoint LabelDisplayMode="SeriesPoint">
                            <dxc:SidePoint.Label>
                                <dxc:SeriesLabel TextPattern="{}{V:f2}"/>
                            </dxc:SidePoint.Label>
                        </dxc:SidePoint>
                    </dxc:SplineSeries2D.LastPoint>
                </dxc:SplineSeries2D>
                <dxc:XYDiagram2D.AxisX>
                    <dxc:AxisX2D>
                        <dxc:AxisX2D.DateTimeScaleOptions>
                            <dxc:ContinuousDateTimeScaleOptions/>
                        </dxc:AxisX2D.DateTimeScaleOptions>
                    </dxc:AxisX2D>
                </dxc:XYDiagram2D.AxisX>
                <dxc:XYDiagram2D.AxisY>
                    <dxc:AxisY2D>
                        <dxc:AxisY2D.WholeRange>
                            <dxc:Range dxc:AxisY2D.AlwaysShowZeroLevel="False"/>
                        </dxc:AxisY2D.WholeRange>
                    </dxc:AxisY2D>
                </dxc:XYDiagram2D.AxisY>
            </dxc:XYDiagram2D>
        </dxc:ChartControl>
    </Grid>
</Window>

Code-Behind:

C#

using DevExpress.Xpf.Charts;
using System;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Threading;

namespace RealtimeChartMVVM {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
        private void chart_BoundDataChanged(object sender, RoutedEventArgs e) {
            // Adjust the visual range.
            AxisX2D axisX = ((XYDiagram2D)chart.Diagram).ActualAxisX;
            DateTime maxRangeValue = (DateTime)axisX.ActualWholeRange.ActualMaxValue;
            axisX.ActualVisualRange.SetMinMaxValues(maxRangeValue.AddSeconds(-10), maxRangeValue);
        }
    }
    public class ChartViewModel {
        const int MaxPointCount = 3000;
        readonly DispatcherTimer timer = new DispatcherTimer();
        public ObservableCollection<DataPoint> DataPoints { get; } = new ObservableCollection<DataPoint>();
        public ChartViewModel() {
            timer.Tick += Timer_Tick;
            timer.Interval = TimeSpan.FromMilliseconds(100);
            timer.Start();
        }
        private void Timer_Tick(object sender, System.EventArgs e) {
            this.DataPoints.Add(new DataPoint(DateTime.Now, GenerateValue(DataPoints.Count)));
            if (DataPoints.Count == MaxPointCount) { timer.Stop(); }
        }
        private double GenerateValue(double x) {
            return Math.Sin(x) * 3 + x / 2 + 5;
        }
    }
    public class DataPoint {
        public DateTime Argument { get; set; }
        public double Value { get; set; }
        public DataPoint(DateTime argument, double value) {
            this.Argument = argument;
            this.Value = value;
        }
    }
}

VB.NET

Imports DevExpress.Xpf.Charts
Imports System
Imports System.Collections.ObjectModel
Imports System.Windows
Imports System.Windows.Threading

Namespace RealtimeChartMvvm
    Public Partial Class MainWindow
        Inherits Window

        Public Sub New()
            Me.InitializeComponent()
        End Sub

        Private Sub chart_BoundDataChanged(ByVal sender As Object, ByVal e As RoutedEventArgs)
            ' Adjust the visual range.
            Dim axisX As AxisX2D = CType(Me.chart.Diagram, XYDiagram2D).ActualAxisX
            Dim maxRangeValue As Date = axisX.ActualWholeRange.ActualMaxValue
            axisX.ActualVisualRange.SetMinMaxValues(maxRangeValue.AddSeconds(-10), maxRangeValue)
        End Sub
    End Class

    Public Class ChartViewModel
        Const MaxPointCount = 3000
        Private ReadOnly timer As DispatcherTimer = New DispatcherTimer()
        Public ReadOnly Property DataPoints As ObservableCollection(Of DataPoint) = New ObservableCollection(Of DataPoint)()

        Public Sub New()
            AddHandler timer.Tick, AddressOf Timer_Tick
            timer.Interval = TimeSpan.FromMilliseconds(100)
            timer.Start()
        End Sub

        Private Sub Timer_Tick(ByVal sender As Object, ByVal e As EventArgs)
            DataPoints.Add(New DataPoint(Date.Now, GenerateValue(DataPoints.Count)))

            If DataPoints.Count = MaxPointCount Then
                timer.Stop()
            End If
        End Sub

        Private Function GenerateValue(ByVal x As Double) As Double
            Return Math.Sin(x) * 3 + x / 2 + 5
        End Function
    End Class

    Public Class DataPoint
        Public Property Argument As Date
        Public Property Value As Double

        Public Sub New(ByVal argument As Date, ByVal value As Double)
            Me.Argument = argument
            Me.Value = value
        End Sub
    End Class
End Namespace