If you have been following my content, you will be familiar with my articles about programming with Windows Presentation Foundation (WPF). In each article, I give a brief explanation about the WPF framework, code-behind, and UI. Well, in this article, I will focus a bit more on the theory to clarify and expand previous knowledge on how to use LightningChart .NET modern WPF UI controls.

LightningChart .NET has a variety of 2D and 3D modern WPF UI controls and tools to implement XY charts in WPF, allowing customizing, updating, or modifying the content of the chart directly from the code behind, sending the complete object directly to an XAML component.

An XY chart can be defined as a two-dimensional map that has an X-axis and a Y-axis. LightningChart .NET needs a chart-type object to add the data series. This data series is an array with numeric values that must comply with a format supported by LightningChart.

This array cannot be sent directly to the chart, so it needs to be assigned to a series. This series can be a line or points-lines, bars, areas, polygons, etc. Below we will see each of the series offered by LC .NET modern WPF UI controls and brief lines of code for their implementation.

What is WPF?

Windows Presentation Foundation (WPF) is a framework for developing Windows desktop applications. WPF offers the ability to create graphical interfaces capable of supporting 2D and 3D graphics with the help of components that can be dragged, customized, and configured interactively or through the XAML language. WPF offers an interactive framework that contains a panel of tools and components that we can use to build applications.

XAML stands for eXtensible Application Markup Language and is a language used primarily in Microsoft technologies, such as UWP and Xamarin. If you have worked with HTML, you may feel somewhat familiar with XAML, as each component is declared within tags with visual properties, similar to the styles of HTML components.

In XAML, the word extensible refers to the ability to define custom components to generate unique, rich, and adaptable user interfaces. On the other hand, WPF allows direct communication between XAML components and the code behind, thanks to events, properties, and data binding. This communication executes processes when necessary or when the user executes a component.

• Events: Events are mechanisms that execute an action when they occur. For example, the OnClick event will occur when the user clicks on a button. When this event occurs, any logic created within the event will be activated.

• Properties: These are attributes that refer to XAML components by using a name or ID. Properties allow accessing components from the code behind as if they were programming objects. In this way, we can modify their content programmatically. It is important to consider the type of data that our component supports to use it correctly through their properties.

• Data Binding: This is one of the most important capabilities of WPF. It allows us to directly link the content of components with any object declared in the code. These allow having an interface with dynamic content, offering better security and stability for applications.

In simple words, the code behind is the programming code associated with the user interface. Unlike some web programming languages where we can find embedded code, WPF allows us to have the code in independent files helping the readability and maintenance of the application.

As mentioned above, WPF keeps the user interface, and the code associated allowing interaction with each component from both sides. While the user interface defines the components and their visual properties, the code behind manages each of the events supported by the framework, updates the content, or validates the actions performed by the user.

The code behind uses C# object-oriented programming which gives access to most classes, libraries, methods, and functions that WPF framework offers. Therefore, you will be able to access databases, files, images, HTTP requests, etc., with the ability to process and generate results on the client side. 

Advantages of code-behind:

• Clarity: Makes it easier to understand the application flow by keeping the logic separate from the interface.

• Ease of use: Allows developers to work on business logic without interfering with the visual design.

• Direct interaction: You can easily access controls and their properties.

The SampleDataBlockSeries is an enhanced version of the SampleDataSeries and is specifically designed for real-time and streaming data applications. It maximizes performance while minimizing CPU and memory usage, enabling the simultaneous rendering of a vast number of data points.

As indicated by its name, data is organized into blocks that are managed individually in memory, eliminating the requirement for large contiguous memory spaces. This makes SampleDataBlockSeries ideal for real-time medical monitoring applications like ECG/EKG and EEG, as well as for industrial monitoring, telemetry, and waveform vibration analysis.

Implementation:

It is necessary to create a ViewXY object. For streaming purposes, it’s necessary to use the scrolling mode, since we will display data coming from left to right.

As part of modern WPF UI controls, the PointLineSeries are specifically designed to visualize data that varies in intervals, making it ideal for data sets with non-uniform increments of value or time. This series provides the versatility to display data in multiple formats: a continuous line, discrete points (scatter), or a combination of both, known as a point line representation.

Users can modify aspects such as line styles, colors, point sizes, and more, allowing for a detailed visual representation that meets specific analytical needs. This series also supports additional features such as tooltips, labels, and legends, which improves the interactivity and clarity of the visualized data.

PointLineSeries is an excellent choice for situations where flexibility and detail are paramount, such as scientific research, financial analysis, or any application where understanding variable ranges is crucial.

Implementation:

When a ViewXY type of chart is created, by default we have access to X-Y axes (index 0). We just need to configure them, a base configuration specifies the range, scroll mode and value-type of each axis. The PointLineSeries class will contain the data set array where each member will be equal to a data point.

DigitalLineSeries is a specialized type of line series designed to display a line that alternates between two Y-values, such as 0 and 1. This series is optimized for high performance and is the most memory-efficient option among all series types.

This series simplifies configuration by focusing solely on the line itself, omitting individual data point markers. This series offers minimal customization options, providing only two properties for appearance adjustments: Color and Width. This makes it an excellent choice for applications where simplicity and performance are key, such as digital signal representation and binary data visualization.

Implementation

The Digital line series uses arrays of units as input data where each value corresponds to 32 bits of data. This type of series can be only used with a Linear axis and DirectX11 engine.

An area series is a type of chart that visualizes data by filling the space between a baseline and the plotted values. This creates a shaded area, which helps to illustrate the volume of data over a specific range, making it easy to see trends and changes over time.

To incorporate an area series into your chart, you simply add AreaSeries objects to an AreaSeries list. The baseline for the filled area can be defined using the BaseValue property, allowing you to set where the area begins.

You can customize the appearance of the area chart with the Fill property to choose the desired fill style, while the LineStyle and PointStyle properties allow for adjustments to the line and point appearances. We can use exceed and decreed limits similarly to how they are used in a HighLowSeries, which helps in defining thresholds for the data.

Implementation

BarSeries enable the visualization of data through horizontal or vertical bars, making it easy to compare different values immediately. To store the values for a BarSeries, you can use the values array property.

To add new values to the series, utilize the “AddValue” method. If you need to update an existing value at a specific index, you can use the “SetValue” method to modify it accordingly.

To customize the appearance of the bars, adjust the BarViewOptions property within the chart.ViewXY settings. This allows you to control various display aspects, enhancing the overall presentation of the bar chart.

Implementation

The BarSeries3D and the BarSeries may contain one or more bars. The visual properties will affect the entire series, but the values can apply to each bar. Bar series data can be added as BarSeriesValue3D structures containing x, y, z axes as well as text fields.

This type of chart IntensityMeshSeries is akin to IntensityGridSeries with one key distinction: the nodes in this series can be placed freely in X-Y space, allowing for non-rectangular arrangements.

You can control the visibility of wireframe lines using the WireframeType property, and if you want to display the individual nodes, simply set ShowNodes to true. This flexibility makes IntensityMeshSeries suitable for a variety of data visualization scenarios where irregular layouts are needed.

Implementation

A stock chart is a graphical representation of a stock’s price movements over time. It provides investors and traders with visual insights into price trends, patterns, and market behavior, helping them make informed decisions about buying or selling stocks.

Stock charts serve various purposes, including:

• Trend Analysis: Identifying upward or downward trends to make informed trading decisions.
• Pattern Recognition: Recognizing specific chart patterns (like head and shoulders or double tops) that can signal potential price movements.
• Decision-Making: Providing a visual context for making buy or sell decisions based on historical price performance and market behavior.

StockSeries provides a way to visualize stock market data using either candlestick or stock bar formats. You can add multiple StockSeries objects to a single chart by utilizing the StockSeries list property, allowing for the comparison of different stock data within the same view.

To choose the display style, use the Style property. The available options include Bars, CandleStick, and OptimizedCandleStick, enabling you to select the format that best suits your data presentation needs.

Implementation

Create a data array and set the array items. Each item has the following fields:

• Date: DateTime value (year, month, day)
• Open: Opening value of the day Close
• Close: value of the day
• Low: The lowest value during the day
• High: The highest value during the day
• Transaction: The total trading sum
• Volume: Count of shares traded

Keep the data always in ascending order by Date value (oldest date first).

Setting X axis to date display:

LightningChart .NET can generate fully customizable 3D objects. For instance, the camera allows visualizing the 3D chart from different angles. It is also possible to use XAML controls to modify the 3D views.

When using 3D charts, you have access to a third axis or dimension (Z axis), which will add a new value to each point in the data set:

PointLineSeries3D allows presenting points and lines in 3D space. For points, there are many basic 3D shapes available. Points relate to a line, if the LineVisible property is set to true. Points can be shown as real 3D points, or as 2D shapes. 

The lines can be rendered as shaded 3D lines or as a one-pixel wide hair line. When having a lot of data in the series, setting LineOptimization = Hairline is recommended to avoid performance issues.

Adding points:

PointLineSeries3D supports three different point formats:

• Points property (SeriesPoint3D array)
• PointsCompact property (SeriesPointCompact3D array)
• PointsCompactColored property (SeriesPointCompactColored3D array)

PointsCompact and PointsCompactColored structures are very memory efficient, allowing up to 100 million data points visualization with simple point styles.

Points:

By using the Points property, all the advanced coloring options of points are supported. SeriesPoint3D structure consists of the following fields:

• double X: X-axis value
• double Y: Y-axis value
• double Z: Z-axis value
• Color: individual data point color, only applies when IndividualPointColors is enabled, or MultiColorLine is enabled.
• Float sizeFactor: size factor multiplies the size defined by PointStyle.Size. Only applies when using IndividualPointSizes is enabled.
• object Tag: freely assignable auxiliary object, for example, to attach some details.

Series points must be added to the code. Use the AddPoints(…) method to add points to the end of existing points.

SurfaceGridSeries3D allows visualizing data as a 3D surface. In SurfaceGridSeries3D, nodes are equally spaced in X dimension, and in Z dimension as well.

Calculation

Setting surface grid data

• Set the X range by using RangeMinX and RangeMaxX properties, to order the minimum and maximum value based on the assigned X axis.
• Set the Z range by using RangeMinZ and RangeMaxZ properties, to order the minimum and maximum value based on the assigned Z axis.
• Set SizeX and SizeZ properties to give the grid a size as columns and rows.
• Set Y values for all nodes:

Surfaces can be created from bitmap images by using the SetHeightDataFromBitmap method. The surface gets the size of the bitmap (if no anti-aliasing or resampling is used).

For each bitmap image pixel, red, green, and blue values are summed. The greater the sum, the higher the height data value for that node will be. Black and dark colors get lower values while bright and white colors get higher values.

Use WireframeType to select the wireframe style. The options are:

• None: no wireframe
• Wireframe: a solid color wireframe. Use WireframeLineType.Color to set the color.
• WireframePalettedByY: wireframe coloring follows SurfacePoint’s Y field ContourPalette.
• WireframePalettedByY: the wireframe coloring follows SurfacePoint’s Value field, ContourPalette
• WireframeSourcePointColored: the wireframe coloring follows the color of the surface nodes
• Dots: solid color dots are drawn in the node positions
• DotsPalettedByY: dots are drawn in the node positions, and colored by ContourPalette according to the Y field of SurfacePoints
• DotsPalettedByValue: dots are drawn in the node positions, and colored by ContourPalette according to the Value field of SurfacePoints
• DotsSourcePointColored: dots are drawn in the node positions, and coloring follows the color of the surface nodes

LightningChart .NET offers seamless integration with modern WPF UI controls, ensuring high compatibility and performance. As discussed earlier, WPF allows user interface components to be manipulated directly from the code-behind, and LC .NET leverages this effortlessly. Its chart component functions as an encapsulated object that can be displayed in the user interface by simply adding it to a XAML component.

Designed to work independently, the chart component is fully configurable and customizable through code, enabling dynamic control via algorithms. This creates a sustainable project with excellent readability and easy maintenance. Adjustments to the user interface are only necessary when controls that modify the chart are required.

Modern WPF UI controls, combined with WPF’s event-handling capabilities, enable interactive chart manipulation. For instance, moving the mouse, right-clicking, or adjusting a slider can trigger updates to the chart’s output based on input values.

LightningChart .NET fully integrates with these modern WPF UI controls, requiring only simple input to facilitate interaction. Additionally, its interactive examples tool provides various sample projects that demonstrate how to connect WPF UI components with the chart. I encourage you to explore this tool and experiment with the charts that interest you. Bye!