Realtime UI and LiveCharts update in MVVM
<p>I'm trying to implement a real-time plot UI, i'm using WPF with the MVVM Pattern and Live-Charts by beto-rodriguez as my plot library, but i have some trouble with updating the graphs in real time. I know that i have to run multiple threads to update the UI in realtime, but every single way i tried doesn't work (i'm learning C# now).
I'm confused of how i should properly implement this pattern for the realtime update, and if the plot library is able to do that. </p>

<p>This is my actual code (its a simplified version of what i will do and doesn't implement any multithread code)</p>

<p>ModelView Code:</p>

<pre><code>using System;
using System.ComponentModel;
using System.Windows;
using LiveCharts;


    namespace TestMotionDetection
    {
        class MainViewModel : INotifyPropertyChanged
        {
            public SeriesCollection Series { get; set; }

            public Func&lt;double, string&gt; YFormatter { get; set; }
            public Func&lt;double, string&gt; XFormatter { get; set; }

            public DataViewModel SData
            {
                set
                {
                    Series[0].Values.Add(value);
                    OnPropertyChanged("Series");
                }
            }

            public event PropertyChangedEventHandler PropertyChanged;

            public MainViewModel()
            {
                SeriesConfiguration&lt;DataViewModel&gt; config = new SeriesConfiguration&lt;DataViewModel&gt;();
                config.Y(model =&gt; model.Value);
                config.X(model =&gt; model.Time);

                Series = new SeriesCollection(config)
                {
                    new LineSeries {Values = new ChartValues&lt;DataViewModel&gt;(), PointRadius = 0}
                };

                XFormatter = val =&gt; Math.Round(val) + " ms";
                YFormatter = val =&gt; Math.Round(val) + " °";
            }

            protected virtual void OnPropertyChanged(string propertyName)
            {
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }

            public void generateData()
            {
                DataViewModel val = new DataViewModel();
                for (int i = 0; i &lt; 500; i++)
                {
                    val.Time = i;
                    val.Value = i + 2.3f;
                    SData = val;
                }
            }
        }
    }
</code></pre>

<p>Here is the View code:</p>

<pre><code>using System.Windows;


namespace TestMotionDetection
{
    /// &lt;summary&gt;
    /// Logica di interazione per MainWindow.xaml
    /// &lt;/summary&gt;
    public partial class MainWindow : Window
    {
        private MainViewModel vista;

        public MainWindow()
        {
            vista = new MainViewModel();
            DataContext = vista;
        }

        private void button_Click(object sender, RoutedEventArgs e)
        {
            vista.generateData();
        }
    }
}
</code></pre>

<p>And the XALM:</p>

<pre><code>&lt;Window x:Class="TestMotionDetection.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:lvc="clr-namespace:LiveCharts;assembly=LiveCharts"
        Title="Example 2  (WPF)"
        Width="1025.213"
        Height="482.801"&gt;

    &lt;Grid&gt;
        &lt;lvc:LineChart Margin="0,2,245,-2"
                       LegendLocation="Right"
                       Series="{Binding Series}"&gt;
            &lt;lvc:LineChart.AxisX&gt;
                &lt;lvc:Axis LabelFormatter="{Binding XFormatter}" Separator="{x:Static lvc:DefaultAxes.CleanSeparator}" /&gt;
            &lt;/lvc:LineChart.AxisX&gt;
            &lt;lvc:LineChart.AxisY&gt;
                &lt;lvc:Axis LabelFormatter="{Binding YFormatter}" /&gt;
            &lt;/lvc:LineChart.AxisY&gt;
        &lt;/lvc:LineChart&gt;
        &lt;Button x:Name="button"
                Width="151"
                Height="79"
                Margin="804,47,0,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Click="button_Click"
                Content="Button" /&gt;
    &lt;/Grid&gt;
&lt;/Window&gt;
</code></pre>

<p>[UPDATE 1]
[<img src="https://i.stack.imgur.com/26bdk.jpg" alt="enter image description here">]<a href="https://i.stack.imgur.com/26bdk.jpg" rel="nofollow noreferrer">1</a></p>