Using Telerik.UWP for presenting a lineseries in realtime with FPS [UWP][C#]

[MReza]

Hi All

I am aiming to use Telerik.UWP for a real-time presentation of a
lineseries, which is the expected the refresh rate be around 10 to 100
fps.
I tried a very basic presentation with the following modifications, but
it seems that it can't generate the plot with the expected refresh rate. but it is fine with 1 or 2 fps.

Would you mind please to find out how I can solve the problem?
Kind regards
Reza

[Lance | Senior Manager Technical Support]

Hi MReza,

Below is a demo that adds data points to the series at about 100 times per second, while keeping 30 "max items" at a time in the series so that you don't run of of memory or bog down the UI with too many UI elements in the visual tree.

Ultimately, you'll need to tweak the sampling rate, the axis's MajorStep and MajorStepUnit, and the "max items" amount to get the right speed for your needs. You can sample at a smaller rate, like 10 fps, and still get the same shaped line because the resolution below such an amount wont make a difference visually. 

MainPage.xaml

<Page x:Class="RealTimeSignalsDemo.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:RealTimeSignalsDemo"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:chart="using:Telerik.UI.Xaml.Controls.Chart"
      mc:Ignorable="d"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.DataContext>
        <local:ViewModel x:Name="PageViewModel" />
    </Page.DataContext>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Grid x:Name="HeaderGrid"
              Height="48"
              Background="{ThemeResource SystemControlHighlightAltListAccentLowBrush}">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"
                        VerticalAlignment="Center">
                <TextBlock Text="Last Signal Received:"
                           Style="{StaticResource SubtitleTextBlockStyle}" />
                <TextBlock Text="{Binding LastSignalReceived}"
                           Style="{StaticResource SubtitleTextBlockStyle}" />
            </StackPanel>
        </Grid>

        <Grid Grid.Row="1">
            <chart:RadCartesianChart x:Name="Signal1Chart"
                                     Grid.Row="0">
                <chart:RadCartesianChart.VerticalAxis>
                    <chart:LinearAxis ShowLabels="False" />
                </chart:RadCartesianChart.VerticalAxis>
                <chart:RadCartesianChart.HorizontalAxis>
                    <!-- IMPORTANT - The MajorStep and MajorStepUnit will also determine how many UIElements the chart will need to render for the data points
                         Setting this correctly will determine how well the chart performs, you don't want to render 1000 UI elements when it can be done with 50  -->
                    <chart:DateTimeContinuousAxis MajorStep="10"
                                                  MajorStepUnit="Millisecond"
                                                  ShowLabels="False" />
                </chart:RadCartesianChart.HorizontalAxis>
                <chart:SplineAreaSeries ItemsSource="{Binding SignalOneItems}">
                    <chart:SplineAreaSeries.CategoryBinding>
                        <chart:PropertyNameDataPointBinding PropertyName="Timestamp" />
                    </chart:SplineAreaSeries.CategoryBinding>
                    <chart:SplineAreaSeries.ValueBinding>
                        <chart:PropertyNameDataPointBinding PropertyName="Value" />
                    </chart:SplineAreaSeries.ValueBinding>
                </chart:SplineAreaSeries>
            </chart:RadCartesianChart>
        </Grid>

        <CommandBar Grid.Row="2">
            <AppBarButton Label="Start Timer"
                                Icon="Play"
                                Click="{x:Bind PageViewModel.ButtonBase_OnClick}" />
        </CommandBar>
    </Grid>
</Page>

MainPage.xaml.cs (includes view model and data model)

namespace RealTimeSignalsDemo
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }

    public class ViewModel : ViewModelBase
    {
        private readonly Random random;
        private string lastSignalReceived;

        public ViewModel()
        {
            random = new Random();

            Timer = new DispatcherTimer { Interval = TimeSpan.FromMilliseconds(10) };
            Timer.Tick += Timer_Tick;
        }

        public ObservableCollection<SignalItem> SignalOneItems { get; set; } = new ObservableCollection<SignalItem>(Enumerable.Range(1, 30).Select(i => new SignalItem
        {
            Timestamp = DateTime.Now.AddMilliseconds(-i * 10) // backful the chart so that when the series fills in evenly whenthe timer starts
        }));

        public DispatcherTimer Timer { get; set; }

        public string LastSignalReceived
        {
            get => lastSignalReceived;
            set
            {
                if (lastSignalReceived == value)
                    return;

                lastSignalReceived = value;
                OnPropertyChanged();
            }
        }
        private void Timer_Tick(object sender, object e)
        {
            ProcessSignals();
        }

        public void ButtonBase_OnClick(object sender, RoutedEventArgs e)
        {
            if (sender is AppBarButton button)
            {
                if (Timer.IsEnabled)
                {
                    Timer.Stop();
                    button.Icon = new SymbolIcon { Symbol = Symbol.Play };
                    button.Label = "Start";
                }
                else
                {
                    Timer.Start();
                    button.Icon = new SymbolIcon { Symbol = Symbol.Stop };
                    button.Label = "Stop";
                }
            }
        }

        private void ProcessSignals()
        {
            // Remove the last data point so that you dont run out of memory
            // Is a value you'll want to tweak to meet your needs depending on the user's system capability
            if (SignalOneItems.Count > 30)
                SignalOneItems.Remove(SignalOneItems.FirstOrDefault());

            // SAMPLE the original source here and add to collection
            SignalOneItems.Add(new SignalItem
            {
                Timestamp = DateTime.Now,
                Value = random.Next(2,10)
            });

            LastSignalReceived = DateTime.Now.ToString("G");
        }
    }

    public class SignalItem
    {
        public DateTime Timestamp { get; set; }

        public double Value { get; set; }
    }
}

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Aleksandr]

Hello,

Could you please upload the whole code of this example. I can't understand what ViewModelBase inhereted class and OnPropertyChanged() method are.

Thank you very much!!!

[Lance | Senior Manager Technical Support]

Hi Aleksandr,

You can find the BindableBase and ViewModelBase classes defined  here https://github.com/LanceMcCarthy/CommonHelpers/tree/master/CommonHelpers/CommonHelpers/Common

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik