This example shows how to create realtime polar chart with noisy sinewave. Recreates data series when timer ticks and then replaces old data points on new ones.

Tips!

To increase performance of chart you can append data points to data series before attaching to appropriate renderable series.

Documentation Links

– Performance Tips and Tricks
– Polar Chart Types
– Polar XAxis
– Polar YAxis

// RealTimePolarChartExampleView.xaml

<UserControl x:Class="SciChart.Examples.Examples.CreateRealtimeChart.RealTimePolarChart"
             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:ext="http://schemas.abtsoftware.co.uk/scichart/exampleExternals"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
             Loaded="OnExampleLoaded"
             Unloaded="OnExampleUnloaded"
             d:DesignHeight="400"
             d:DesignWidth="600"
             mc:Ignorable="d">
    <UserControl.Resources>

        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/SciChart.Examples.ExternalDependencies;component/Resources/Styles/ToolbarButtonsCommon.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            
            <ext:EnumValueToStringConverter x:Key="SelectedEnumValueConverter"/>
        </ResourceDictionary>
    </UserControl.Resources>
    
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

          <!--  The SciChartInteractionToolbar adds zoom, pan, zoom extents and rotate functionality  -->
          <!--  to the chart and is included for example purposes.  -->
          <!--  If you wish to know how to zoom and pan a chart then do a search for Zoom Pan in the Examples suite!  -->
        <Border Background="#FF232426" BorderBrush="#323539" Panel.ZIndex="9999" BorderThickness="0,0,2,0">

            <WrapPanel HorizontalAlignment="Left" Orientation="Vertical">

                <ext:FlyoutMenuButton HorizontalAlignment="Left" Content="Wheel" Style="{StaticResource MouseWheelButtonStyle}" ToolTipService.ToolTip="MouseWheel">

                    <ext:FlyoutMenuButton.PopupContent>
                        <StackPanel MinWidth="150" Orientation="Vertical">
                            <TextBlock Text="Action Type"/>
                            <ComboBox ItemsSource="{Binding Source={ext:EnumValues {x:Type s:ActionType}}}"
                                      SelectedItem="{Binding ActionType, Source={x:Reference Name=MouseWheelZoomMod}, Mode=TwoWay, Converter={StaticResource SelectedEnumValueConverter}}"/>
                            <ext:FlyoutSeparator/>

                            <TextBlock Text="Direction"/>
                            <ComboBox ItemsSource="{Binding Source={ext:EnumValues {x:Type s:XyDirection}}}" 
                                      SelectedItem="{Binding ElementName=MouseWheelZoomMod, Path=XyDirection, Mode=TwoWay, Converter={StaticResource SelectedEnumValueConverter}}"/>
                        </StackPanel>
                    </ext:FlyoutMenuButton.PopupContent>
                </ext:FlyoutMenuButton>

                <ext:FlyoutMenuButton x:Name="realTimePolarSpeedTime"
                          HorizontalAlignment="Left"
                          Content="TS"
                          Style="{StaticResource FlyoutMenuButtonStyle}"
                          ToolTipService.ToolTip="MouseWheel">

                    <ext:FlyoutMenuButton.PopupContent>
                        <StackPanel MinWidth="150" Orientation="Vertical">

                            <TextBlock Margin="3"
                               Foreground="White"
                               Text="Timer Speed (ms): " />

                            <Slider x:Name="Slider"
                            Width="160"
                            Margin="5"
                            Maximum="500"
                            Minimum="20"
                            ValueChanged="Slider_OnValueChanged"
                            Value="50" />

                            <TextBlock Margin="5" Foreground="White">
                      <Run Text="{Binding Source={x:Reference Name=Slider}, Path=Value, StringFormat=\{0:0.0\}}" />
                      <Run Text="ms" />
                            </TextBlock>

                        </StackPanel>
                    </ext:FlyoutMenuButton.PopupContent>
                </ext:FlyoutMenuButton>

            </WrapPanel>
        </Border>

        <s:SciChartSurface Name="sciChartSurface" Grid.Column="1">

            <s:SciChartSurface.RenderableSeries>
                <s:FastLineRenderableSeries Name="lineSeries"
                                            Stroke="#FF99EE99"
                                            StrokeThickness="2" />
            </s:SciChartSurface.RenderableSeries>

            <s:SciChartSurface.XAxis>
                <s:PolarXAxis AutoRange="Always"
                              BorderBrush="#FFAAFFAA"
                              BorderThickness="0,4,0,0" />
            </s:SciChartSurface.XAxis>

            <s:SciChartSurface.YAxis>
                <s:PolarYAxis AutoRange="Never" VisibleRange="-2.0, 2.0" />
            </s:SciChartSurface.YAxis>
            
            <s:SciChartSurface.ChartModifier>
                <s:ModifierGroup>
                    <s:ZoomExtentsModifier />
                    <s:MouseWheelZoomModifier x:Name="MouseWheelZoomMod" XyDirection="YDirection" />
                </s:ModifierGroup>
            </s:SciChartSurface.ChartModifier>

        </s:SciChartSurface>
    </Grid>
</UserControl>

// RealTimePolarChartExampleView.xaml.cs

// *************************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2022. All rights reserved.
//  
// Web: http://www.scichart.com
//   Support: support@scichart.com
//   Sales:   sales@scichart.com
// 
// RealTimePolarChartExampleView.xaml.cs is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use. 
// 
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied. 
// *************************************************************************************
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Threading;
using SciChart.Charting.Model.DataSeries;
using SciChart.Examples.ExternalDependencies.Data;

namespace SciChart.Examples.Examples.CreateRealtimeChart
{
    /// <summary>
    /// Interaction logic for RealTimePolarChart.xaml
    /// </summary>
    public partial class RealTimePolarChart : UserControl
    {
        // A drop in replacement for System.Random which is 3x faster: https://www.codeproject.com/Articles/9187/A-fast-equivalent-for-System-Random
        private readonly Random _random = new Random();
        private double _lastAmplitude = 1.0;
        private DispatcherTimer _timer;

        public RealTimePolarChart()
        {
            InitializeComponent();
        }

        /// <summary>
        /// Every X milliseconds we create a new DataSeries and append new data to it.
        /// Then, DataSeries are re-assigned to RenderableSeries. 
        /// </summary>
        private void TimerOnElapsed(object sender, EventArgs e)
        {
            var newDataSeries = new XyDataSeries<double, double>();

            // Create a noisy sine wave and cache
            // All this code is about the generation of data to create a nice randomized sine wave with 
            // varying phase and amplitude
            var randomAmplitude = Constrain(_lastAmplitude + (_random.NextDouble() - 0.50) / 2, -2.0, 2.0);
            const double phase = 0.0;

            var noisySineWave = DataManager.Instance.GetNoisySinewave(randomAmplitude, phase, 1000, 0.25);
            _lastAmplitude = randomAmplitude;

            // Append to a new dataseries
            newDataSeries.Append(noisySineWave.XData, noisySineWave.YData);

            lineSeries.DataSeries = newDataSeries;
        }

        private static double Constrain(double value, double noLowerThan, double noBiggerThan)
        {
            return Math.Max(Math.Min(value, noBiggerThan), noLowerThan);
        }

        private void Slider_OnValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            if (_timer != null)
            {
                _timer.Interval = TimeSpan.FromMilliseconds(Slider.Value);
            }
        }

        private void OnExampleLoaded(object sender, RoutedEventArgs e)
        {
            if (_timer == null)
            {
                _timer = new DispatcherTimer(DispatcherPriority.Render)
                {
                    Interval = TimeSpan.FromMilliseconds(Slider.Value)
                };

                _timer.Tick += TimerOnElapsed;

                _timer.Start();
            }
        }

        private void OnExampleUnloaded(object sender, RoutedEventArgs e)
        {
            if (_timer != null)
            {
                _timer.Stop();

                _timer.Tick -= TimerOnElapsed;

                _timer = null;
            }
        }
    }
}

< BACK TO ALL WPF CHART CHART EXAMPLES