iOS & macOS Charting Documentation - SciChart iOS & macOS Charts SDK v4.x

The Waterfall 3D Chart Type

The Waterfall Chart renders a two-dimensional array as a series of slices. In SciChart it’s defined by the SCIWaterfallRenderableSeries3D class and provides a number of configurable chart types in SciChart 3D. As an example, it can be used for the following:

dynamic updating slices for visualizing spectra (Acoustic or radio frequency domain data)
volumetric slices
optional PointMarkers at data-points.
and more…

Waterfall 3D Series Type

NOTE: Examples of the Waterfall 3D Series can be found in the SciChart iOS Examples Suite as well as on GitHub:

Obj-C/Swift Example

Xamarin Example

In the Surface Mesh 3D Series, the data is stored in the SCIWaterfallDataSeries3D. This represents a 2-dimensional grid, typically of type double.

Some important points which is must to know while configuring the Waterfall Series:

The double values which are stored in the SCIWaterfallDataSeries3D correspond to the heights on the chart [Y-Axis]. They are transformed into chart World Coordinates via the ISCIChartSurface3D.yAxis.
The Z and X Data-Value are defined by the StartX, StepX, StartZ and StepZ properties on SCIUniformGridDataSeries3D. These are transformed into World Coordinates via the ISCIChartSurface3D.xAxis and ISCIChartSurface3D.zAxis respectively.
The Color of each slice and outlines are define by the SCIMeshColorPalette via the following properties:

Read on to learn more about Applying Palettes to the Waterfall

Create a Surface Mesh Series 3D

In order to create Waterfall Series - you will need to provide the SCIWaterfallDataSeries3D with N x M array of points, which is an array of slices.

See the code below, which shows how to create the above chart:

const int PointsPerSlice = 128;
const int SliceCount = 20;
SCIWaterfallDataSeries3D *ds = [[SCIWaterfallDataSeries3D alloc] initWithXType:SCIDataType_Double yType:SCIDataType_Double zType:SCIDataType_Double xSize:PointsPerSlice zSize:SliceCount];
ds.startX = @(10.0);
ds.startZ = @(1.0);
[self fill:ds];
unsigned int fillColors[5] = { 0xFFFF0000, 0xFFFFA500, 0xFFFFFF00, 0xFFADFF2F, 0xFF006400 };
float fillStops[5] = { 0.0, 0.25, 0.5, 0.75, 1.0 };
SCIGradientColorPalette *fillColorPalette = [[SCIGradientColorPalette alloc] initWithColors:fillColors stops:fillStops count:5];
unsigned int strokeColors[4] = { 0xFFDC143C, 0xFFFF8C00, 0xFF32CD32, 0xFF32CD32 };
float strokeStops[4] = { 0.0, 0.3, 0.67, 1.0 };
SCIGradientColorPalette *strokeColorPalette = [[SCIGradientColorPalette alloc] initWithColors:strokeColors stops:strokeStops count:4];
SCIWaterfallRenderableSeries3D *rs = [SCIWaterfallRenderableSeries3D new];
rs.dataSeries = ds;
rs.stroke = 0xFF0000FF;
rs.strokeThickness = 1.0;
rs.sliceThickness = 0.0;
rs.yColorMapping = fillColorPalette;
rs.yStrokeColorMapping = strokeColorPalette;
rs.opacity = 0.8;

let PointsPerSlice = 128;
let SliceCount = 20;
private let fillColorPalette = SCIGradientColorPalette(colors: [0xFFFF0000, 0xFFFFA500, 0xFFFFFF00, 0xFFADFF2F, 0xFF006400], stops: [0.0, 0.25, 0.5, 0.75, 1.0], count: 5)
private let strokeColorPalette = SCIGradientColorPalette(colors: [0xFFDC143C, 0xFFFF8C00, 0xFF32CD32, 0xFF32CD32], stops: [0.0, 0.33, 0.67, 1.0], count: 4)
let ds = SCIWaterfallDataSeries3D(xType: .double, yType: .double, zType: .double, xSize: PointsPerSlice, zSize: SliceCount)
ds.set(startX: 10.0)
ds.set(startZ: 1.0)
fill(dataSeries: ds)
let rs = SCIWaterfallRenderableSeries3D()
rs.dataSeries = ds
rs.stroke = 0xFF0000FF
rs.strokeThickness = 1.0
rs.sliceThickness = 0.0
rs.yColorMapping = fillColorPalette
rs.yStrokeColorMapping = strokeColorPalette
rs.opacity = 0.8;

var dataSeries3D = new WaterfallDataSeries3D<double, double, double>(pointsPerSlice, sliceCount) { StartX = 10d, StepX = 1d, StartZ = 1d };
for (int i = 0; i < sliceCount; i++)
{
dataSeries3D.SetRowAt(i, data[i]);
}
var rSeries3D = new SCIWaterfallRenderableSeries3D
{
DataSeries = dataSeries3D,
StrokeThickness = 1f,
SliceThickness = 0f,
YColorMapping = new SCIGradientColorPalette(
new[] { ColorUtil.Red, ColorUtil.Orange, ColorUtil.Yellow, ColorUtil.GreenYellow, ColorUtil.DarkGreen },
new[] { 0, .25f, .5f, .75f, 1 }),
YStrokeColorMapping = new SCIGradientColorPalette(
new[] { ColorUtil.Crimson, ColorUtil.DarkOrange, ColorUtil.LimeGreen, ColorUtil.LimeGreen },
new[] { 0, 0.33f, 0.67f, 1 }),
Opacity = 0.8f,
};

Applying Palettes to the Waterfall

The Waterfall chart obeys Palette rules similar to that of the 3D SurfaceMesh Chart. To learn more about the types of palette available and how to declare them - please see the Applying Palettes section of the 3D SurfaceMesh Chart article.

Palettes which may be applied to the SCIWaterfallRenderableSeries3D chart include:

SCISolidColorBrushPalette - applies a solid color the waterfall slice or stroke.
SCIGradientColorPalette - maps a linear gradient to the slice or stroke, where heights map to successive colors.

The properties which allow colouring the Waterfall slices and outlines are available for the Z-Direction and Y-Direction. Those are mutually exclusive, and you should choose one direction at a time.

Read on to see some examples of applying Palettes to SCIWaterfallRenderableSeries3D.

Applying Solid Palettes to Waterfall Slices

To apply Solid color to the Waterfall Slices, please use the following code:

rSeries.yColorMapping = [[SCISolidColorBrushPalette alloc] initWithColor:0xFF6495ED];
rSeries.yStrokeColorMapping = [[SCISolidColorBrushPalette alloc] initWithColor:0xFF6495ED];

rSeries.yColorMapping = SCISolidColorBrushPalette(color: 0xFF6495ED)
rSeries.yStrokeColorMapping = SCISolidColorBrushPalette(color: 0xFF6495ED)

rSeries.YColorMapping = new SCISolidColorBrushPalette(0xFF6495ED);
rSeries.YStrokeColorMapping = new SCISolidColorBrushPalette(0xFF6495ED);

Solid Fill	Solid Outline

Applying Linear Gradient Palettes to Waterfall Slice Fill

To apply Linear Gradient to the Waterfall Slices, first prepare the SCIGradientColorPalette for the upcoming steps:

unsigned int colors[5] = { 0xFFFF0000, 0xFFFFA500, 0xFFFFFF00, 0xFFADFF2F, 0xFF006400 };
float stops[5] = { 0.0, 0.25, 0.5, 0.75, 1.0 };
SCIGradientColorPalette *colorPalette = [[SCIGradientColorPalette alloc] initWithColors:colors stops:stops count:5];

let colorPalette = SCIGradientColorPalette(colors: [0xFFFF0000, 0xFFFFA500, 0xFFFFFF00, 0xFFADFF2F, 0xFF006400], stops: [0.0, 0.25, 0.5, 0.75, 1.0], count: 5)

var colorPalette = new SCIGradientColorPalette(
new[] { ColorUtil.Red, ColorUtil.Orange, ColorUtil.Yellow, ColorUtil.GreenYellow, ColorUtil.DarkGreen },
new[] { 0, .25f, .5f, .75f, 1 });

From here, we can apply it to the Slice Fill, Outline or Both.

Applying a Color Palette onto Slice Fill in a Y or Z direction:

// Z-Direction
rSeries.zColorMapping = colorPalette;
rSeries.zStrokeColorMapping = [[SCISolidColorBrushPalette alloc] initWithColor:0x00FFFFFF];
// or Y-Direction
rSeries.yColorMapping = colorPalette;
rSeries.yStrokeColorMapping = [[SCISolidColorBrushPalette alloc] initWithColor:0x00FFFFFF];

// Z-Direction
rSeries.zColorMapping = colorPalette
rSeries.zStrokeColorMapping = SCISolidColorBrushPalette(color: 0x00FFFFFF)
// or Y-Direction
rSeries.yColorMapping = colorPalette
rSeries.yStrokeColorMapping = SCISolidColorBrushPalette(color: 0x00FFFFFF)

// Z-Direction
rSeries.ZColorMapping = colorPalette;
rSeries.ZStrokeColorMapping = new SCISolidColorBrushPalette(0x00FFFFFF);
// or Y-Direction
rSeries.YColorMapping = colorPalette;
rSeries.YStrokeColorMapping = new SCISolidColorBrushPalette(0x00FFFFFF);

Z-Direction Fill	Y-Direction Fill

Applying a Color Palette onto Slice Stroke in a Y or Z direction:

// Z-Direction
rSeries.zColorMapping = [[SCISolidColorBrushPalette alloc] initWithColor:0x00FFFFFF];
rSeries.zStrokeColorMapping = colorPalette;
// or Y-Direction
rSeries.yColorMapping = [[SCISolidColorBrushPalette alloc] initWithColor:0x00FFFFFF];
rSeries.yStrokeColorMapping = colorPalette;

// Z-Direction
rSeries.zColorMapping = SCISolidColorBrushPalette(color: 0x00FFFFFF)
rSeries.zStrokeColorMapping = colorPalette
// or Y-Direction
rSeries.yColorMapping = SCISolidColorBrushPalette(color: 0x00FFFFFF)
rSeries.yStrokeColorMapping = colorPalette

// Z-Direction
rSeries.ZColorMapping = new SCISolidColorBrushPalette(0x00FFFFFF);
rSeries.ZStrokeColorMapping = colorPalette;
// or Y-Direction
rSeries.YColorMapping = new SCISolidColorBrushPalette(0x00FFFFFF);
rSeries.YStrokeColorMapping = colorPalette;

Z-Direction Stroke	Y-Direction Stroke

Volumetric Waterfall 3D

A Waterfall Chart can be made volumetric by setting the property SCIWaterfallRenderableSeries3D.sliceThickness (default value = 0), e.g.:

SCIWaterfallRenderableSeries3D *rSeries = [SCIWaterfallRenderableSeries3D new];
rSeries.sliceThickness = 10.0;

let rSeries = SCIWaterfallRenderableSeries3D()
rSeries.sliceThickness = 10.0

var rSeries = new SCIWaterfallRenderableSeries3D();
rSeries.SliceThickness = 10.0;

Volumetric Waterfall 3D

PointMarkers on Waterfall 3D

A Waterfall Chart Slice data-points can be marked with a Point Markers. That’s achieved by providing the Point Marker 3D for the SCIWaterfallRenderableSeries3D. See the code snipped below:

SCISpherePointMarker3D *pointMarker = [SCISpherePointMarker3D new];
pointMarker.fillColor = 0xFFFFA500;
pointMarker.size = 10.0;
SCIWaterfallRenderableSeries3D *rSeries = [SCIWaterfallRenderableSeries3D new];
rSeries.pointMarker = pointMarker;

let pointMarker = SCISpherePointMarker3D()
pointMarker.fillColor = 0xFFFFA500;
pointMarker.size = 10.0
let rSeries = SCIWaterfallRenderableSeries3D()
rSeries.pointMarker = pointMarker

var rSeries = new SCIWaterfallRenderableSeries3D();
rSeries.PointMarker = new SCISpherePointMarker3D { FillColor = 0xFFFFA500, Size = 10.0f };

Waterfall 3D With PointMarkers

NOTE: For more information - please refer to the PointMarker API article.

Real-time Waterfall 3D Example

In SciChart, it’s possible to create real-time Waterfall 3D Charts which is shown below:

NOTE: Examples of the Real-Time Waterfall 3D Series can be found in the SciChart iOS Examples Suite as well as on GitHub:

Obj-C/Swift Example

Xamarin Example