// WPF Chart Examples

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.

DOWNLOAD THE SDK

// WPF RealTime 3D Waterfall Chart

The 3D Realtime Waterfall Chart example shows how to update a Waterfall Chart in real-time.

// Source Code

The C#/WPF source code for the WPF RealTime 3D Waterfall Chart example is included below (Scroll down!).

Did you know you can also view the source code from one of the following sources as well?

Clone the SciChart.WPF.Examples from Github.
Or, view source and export each example to a Visual Studio project from the SciChart WPF Examples suite.
Also the SciChart WPF Trial contains the full source for the examples (link below).

DOWNLOAD THE WPF CHART EXAMPLES

WPF RealTime 3D Waterfall Chart - View and Export Source Code

// RealtimeWaterfall3DChart.xaml

ï»¿<UserControl x:Class="SciChart.Examples.Examples.Charts3D.CreateRealtime3DCharts.RealtimeWaterfall3DChart"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:ext="http://schemas.abtsoftware.co.uk/scichart/exampleExternals"
             xmlns:s3D="http://schemas.abtsoftware.co.uk/scichart3D"
             xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
             xmlns:system="clr-namespace:System;assembly=mscorlib"
             mc:Ignorable="d"
             Loaded="OnExampleLoaded"
             Unloaded="OnExampleUnloaded"
             d:DesignHeight="300" d:DesignWidth="300">
  <Grid>
    <Grid.Resources>
      <s3D:GradientColorPalette x:Key="GradientColorPalette" IsStepped="False">
        <s3D:GradientColorPalette.GradientStops>
          <GradientStop Offset="0" Color="Red"/>
          <GradientStop Offset="0.5" Color="Orange"/>
          <GradientStop Offset="1" Color="Green"/>
        </s3D:GradientColorPalette.GradientStops>
      </s3D:GradientColorPalette>

      <Style x:Key="WaterfallSeriesStyle" TargetType="s3D:WaterfallRenderableSeries3D">
        <Setter Property="Stroke" Value="#773333FF" />
        <Setter Property="Opacity" Value="0.8" />
                <Setter Property="ClipMode" Value="{Binding Source={x:Reference Name=ckbClipMode}, Path=SelectedValue}"/>
        <Setter Property="ZColorMapping" Value="{x:Null}"/>
        <Setter Property="YColorMapping" Value="{x:Null}"/>
        <Style.Triggers>
                    <DataTrigger Binding="{Binding Source={x:Reference Name=ckbFillY}, Path=IsChecked}" Value="True">
            <Setter Property="YColorMapping" Value="{StaticResource GradientColorPalette}"/>
          </DataTrigger>
                    <DataTrigger Binding="{Binding Source={x:Reference Name=ckbFillZ}, Path=IsChecked}" Value="True">
            <Setter Property="ZColorMapping" Value="{StaticResource GradientColorPalette}"/>
          </DataTrigger>
        </Style.Triggers>
      </Style>

       <Style x:Key="MeshSeriesStyle" TargetType="s3D:SurfaceMeshRenderableSeries3D">
           <Setter Property="Stroke" Value="#773333FF" />
           <Setter Property="Opacity" Value="0.8" />
           <Setter Property="MeshColorPalette" Value="{StaticResource GradientColorPalette}" />
       </Style>

       <ObjectDataProvider x:Key="ClipModeEnum" MethodName="GetValues"
                            ObjectType="{x:Type system:Enum}">
                <ObjectDataProvider.MethodParameters>
                    <x:Type TypeName="s3D:ClipMode"/>
                </ObjectDataProvider.MethodParameters>
            </ObjectDataProvider>

       <Style x:Key="MyRadioButton" TargetType="{x:Type RadioButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <Grid>
                            <CheckBox
                                IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, 
                                Path=IsChecked, Mode=TwoWay}"
                                IsHitTestVisible="False" Content="{TemplateBinding Content}" />
                            <CheckBox
                                IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, 
                            Path=IsChecked, Mode=TwoWay}"   
                                Content="{TemplateBinding Content}" Opacity="0"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Grid.Resources>
    
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <!--  The SciChart3DInteractionToolbar adds rotate, orbit, zoom, pan, zoom extents functionality  -->
    <!--  to the chart and is included for example purposes.  -->
    <!--  If you wish to know how to zoom and pan a 3D chart then do a search for Zoom Pan in the Examples suite!  -->
        <ext:SciChart3DInteractionToolbar TargetSurface="{Binding Source={x:Reference Name=SciChart}}" >
      <ext:FlyoutMenuButton Style="{StaticResource FlyoutMenuButtonStyle}"
                      Content="CTRL"
                      FontSize="10"
                      Padding="0" 
                      x:Name="CTRLButton">
        <ext:FlyoutMenuButton.PopupContent>
          <StackPanel Orientation="Vertical" MinWidth="150">

            <!-- Checkboxes to decide how the chart should be filled -->
            <TextBlock FontSize="12" Text="Gradient fill direction:" />
          
           <RadioButton x:Name="ckbFillY" FontSize="12" Margin="4" Content="Along Y Axis" IsChecked="True" GroupName="GradientFillDirection" Style="{StaticResource MyRadioButton}"/>
           <RadioButton x:Name="ckbFillZ" FontSize="12" Margin="4" Content="Along Z Axis" GroupName="GradientFillDirection" Style="{StaticResource MyRadioButton}"/>

           <ext:FlyoutSeparator/>

            <!-- Checkbox to decide which data points appear -->
            <TextBlock FontSize="12" Text="Clip values:" />
            <ComboBox  FontSize="12" Margin="4" x:Name="ckbClipMode" ItemsSource="{Binding Source={StaticResource ClipModeEnum}}" SelectedItem="{x:Static s3D:ClipMode.BelowZero}"/>
        </StackPanel>
        </ext:FlyoutMenuButton.PopupContent>
      </ext:FlyoutMenuButton>
        
      <ext:FlyoutMenuButton Style="{StaticResource FlyoutMenuButtonStyle}"
                            Content="MESH" FontSize="9"
                            Padding="0">
        <ext:FlyoutMenuButton.PopupContent>
            <StackPanel>
                <TextBlock FontSize="12" Text="Change series Type:"/>
                <ComboBox SelectionChanged="SelectedTypeChanged" SelectedIndex="1">
                    <ComboBox.Items>
                        <system:String>Surface Mesh</system:String>
                        <system:String>Waterfall</system:String>
                    </ComboBox.Items>
                </ComboBox>
            </StackPanel>
        </ext:FlyoutMenuButton.PopupContent>
    </ext:FlyoutMenuButton>
        
    </ext:SciChart3DInteractionToolbar>

    <s3D:SciChart3DSurface x:Name="SciChart" Grid.Column="1"
                           BorderThickness="0"
                           WorldDimensions="200,100,200">
      <s3D:SciChart3DSurface.Camera>
        <s3D:Camera3D ZoomToFitOnAttach="True"/>
      </s3D:SciChart3DSurface.Camera>

      <s3D:SciChart3DSurface.RenderableSeries>
                <s3D:WaterfallRenderableSeries3D x:Name="WaterfallSeries" Style="{StaticResource WaterfallSeriesStyle}" />
                <s3D:SurfaceMeshRenderableSeries3D x:Name="MeshSeries" Style="{StaticResource MeshSeriesStyle}" IsVisible="False"/>
      </s3D:SciChart3DSurface.RenderableSeries>

      <s3D:SciChart3DSurface.XAxis>
        <s3D:NumericAxis3D />
      </s3D:SciChart3DSurface.XAxis>

      <s3D:SciChart3DSurface.YAxis>
        <s3D:NumericAxis3D VisibleRange="0, 5"/>
      </s3D:SciChart3DSurface.YAxis>

      <s3D:SciChart3DSurface.ZAxis>
        <s3D:NumericAxis3D/>
      </s3D:SciChart3DSurface.ZAxis>
    </s3D:SciChart3DSurface>
  </Grid>
</UserControl>

// RealtimeWaterfall3DChart.xaml.cs

ï»¿using System;
using System.Timers;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Threading;
using SciChart.Charting3D.Model;
using SciChart.Charting3D.Model.DataSeries.Waterfall;
using SciChart.Core.Helpers;
using SciChart.Examples.ExternalDependencies.Data;


namespace SciChart.Examples.Examples.Charts3D.CreateRealtime3DCharts
{
    /// <summary>
    /// Interaction logic for RealtimeWaterfall3DChart.xaml
    /// </summary>
    public partial class RealtimeWaterfall3DChart : UserControl
    {
        // Data Sample Rate (sec) 
        private double dt = 0.02;

        // The current time
        private double t;

        private int _tick;
        private int _step = 3;

        private WaterfallDataSeries3D<double> _waterfallDataSeries;

        // 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 FasterRandom _random;

        private readonly FFT2 _transform;
        private int _transformSize;
        private double[] _real;
        private double[] _imaginary;

        private Timer _timer;
        private int _ticks = 16;

        private int _pointsPerSlice = 1024;
        private int _maxSliceCount = 20;

        private int _iteration = 0;
        private bool _isUpward = false;
        private DispatcherTimer _timerNewDataUpdate;

        public RealtimeWaterfall3DChart()
        {
            InitializeComponent();

            _random = new FasterRandom();
            _transform = new FFT2();            

            Loaded += OnLoaded;
        }

        private void OnTimerTick(object sender, EventArgs e)
        {
            var generatedRow = GenerateDataRow();

            _waterfallDataSeries.PushRow(generatedRow);
        }

        private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
        {
            // Initialize FFT
            _transform.init((uint) Math.Log(_pointsPerSlice, 2));
            _transformSize = _pointsPerSlice * 2;
            _real = new double[_transformSize];
            _imaginary = new double[_transformSize];

            // Initialize WaterfallDataSeries3D
            _waterfallDataSeries = new WaterfallDataSeries3D<double>(_pointsPerSlice, _maxSliceCount);
            _waterfallDataSeries.StartX = 10;
            _waterfallDataSeries.StepX = 1;

            _waterfallDataSeries.StartZ = 25;
            _waterfallDataSeries.StepZ = 10;

            WaterfallSeries.DataSeries = _waterfallDataSeries;

            MeshSeries.DataSeries = (UniformGridDataSeries3D<double, double, double>) _waterfallDataSeries;
        }

        // NOTE: The purpose of this function is to simply generate some random data to display in the waterfall chart
        // Each row is _pointsPerSlice wide and there are _maxSliceCount slices in the waterfall 
        private double[] GenerateDataRow()
        {
            var generatedRow = new double[_pointsPerSlice];

            // Randomly introduce changes in amplitude
            _tick++;
            if (_tick == 2)
            {
                _tick = 0;
                _step = _random.Next(10, 20);
            }

            for (int i = 0; i < _transformSize; i++)
            {
                double noise = _random.Next(-100, 100) * 0.002;               

                // Compute a sinusoidal based waveform with some varying frequency and random amplitude 
                double y = _step * 2 * Math.Sin(((2 * Math.PI) *0.1) * t) + noise;
                y += Math.Sin(((2 * Math.PI) * 0.2) * t);

                _real[i] = y;
                _imaginary[i] = 0;
                t += dt;
            }

            // Do an FFT
            _transform.run(_real, _imaginary);

            // Convert FFT back to magnitude (required for a meaninful output in our test data)
            for (int i = 0; i < _pointsPerSlice; i++)
            {
                double magnitude = Math.Sqrt(_real[i] * _real[i] + _imaginary[i] * _imaginary[i]);
                generatedRow[i] = Math.Log10(magnitude);               
            }

            return generatedRow;
        }

        private void OnExampleLoaded(object sender, RoutedEventArgs e)
        {
            if (_timerNewDataUpdate == null)
            {
                _timerNewDataUpdate = new DispatcherTimer(DispatcherPriority.Render);
                _timerNewDataUpdate.Tick += OnTimerTick;
                _timerNewDataUpdate.Interval = TimeSpan.FromMilliseconds(25);
                _timerNewDataUpdate.Start();
            }
        }

        private void OnExampleUnloaded(object sender, RoutedEventArgs e)
        {
            if (_timerNewDataUpdate != null)
            {
                _timerNewDataUpdate.Stop();
                _timerNewDataUpdate = null;
            }
        }
    
        private void SelectedTypeChanged(object sender, SelectionChangedEventArgs e)
        {
            var isWaterfallRunning =  e.AddedItems[0].Equals("Waterfall");
            if (WaterfallSeries != null && MeshSeries != null)
            {
                WaterfallSeries.IsVisible = isWaterfallRunning;
                MeshSeries.IsVisible = !isWaterfallRunning;
                CTRLButton.IsEnabled = isWaterfallRunning;
            }
        }
    }
}

< BACK TO ALL WPF CHART CHART EXAMPLES

// WPF Chart Examples

// WPF RealTime 3D Waterfall Chart

// Source Code

// RealtimeWaterfall3DChart.xaml

// RealtimeWaterfall3DChart.xaml.cs

WPF CHART EXAMPLES

2D Charts

Basic Chart Types

Chart Annotations

Create a Multiseries Chart

Create Custom Charts

Create Realtime Charts

Create Stock Charts

Export a Chart

Filters API

Heatmap Chart Types

Legends

Link Multiple Charts

Manipulate Series

Modify Axis Behavior

MVVM Examples

Styling and Theming

Ternary Chart Types

Tooltips and Hit Test

Zoom and Pan a Chart

Zoom History Manager

3D Charts

Basic Chart Types

Customize 3D Charts

Manipulate Series

Modify Axis3D Behavior

Realtime 3D Charts

Style a 3D Chart

Surface Mesh Charts

Tooltips and Hit Test 3D Charts

Zoom and Pan a 3D Chart

Featured Apps

Financial Charts

Medical Charts

Performance Demos

Scientific Charts