SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components
SciChart WPF ships with hundreds of WPF Chart Examples which you can browse, play with, view the source-code and even export each WPF Chart Example to a stand-alone Visual Studio solution. All of this is possible with the new and improved SciChart WPF Examples Suite, which ships as part of the SciChart WPF SDK.
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
The C#/WPF source code for the WPF Realtime Polar Charts example is included below (Scroll down!).
Did you know you can also view the source code from one of the following sources as well?
<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>
// *************************************************************************************
// 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;
}
}
}
}