This is a migrated thread and some comments may be shown as answers.

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

3 Answers 132 Views
Chart
This is a migrated thread and some comments may be shown as answers.
MReza
Top achievements
Rank 1
MReza asked on 08 Aug 2018, 11:17 AM

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

3 Answers, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 08 Aug 2018, 05:06 PM
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:local="using:RealTimeSignalsDemo"
      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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Aleksandr
Top achievements
Rank 1
answered on 13 Oct 2019, 12:06 PM
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!!!
0
Lance | Manager Technical Support
Telerik team
answered on 13 Oct 2019, 02:00 PM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Chart
Asked by
MReza
Top achievements
Rank 1
Answers by
Lance | Manager Technical Support
Telerik team
Aleksandr
Top achievements
Rank 1
Share this question
or