New Series Types for the 15.2 UltraDataChart

Michael DiFilippo / Monday, November 02, 2015

The Windows Forms DataChart has been updated with several new series previously seen on XAML.

Introducing the Bubble, Polar, Radial, and Stacked series!

Bubble Series Overview

The BubbleSeries belongs to a group of Scatter Series that uses the Cartesian (x, y) coordinate system. It uses the DataSource property, like other types of Scatter Series, to bind any data object that implements the IEnumerable interface (e.g. List, Collection, Queue, and Stack).

Bubble Series Minimum Requirements

Each item the data object the chart is bound to must have one numeric data column (for the size of the bubble) in addition to two numeric data columns (for the X and Y values) in order to plot across the Cartesian coordinate system.

This code snippet below demonstrates how to bind sample bubble data to the BubbleSeries.

UltraDataChart_Scatter_Bubble_Series_03

Scatter Series display the data as collection of data points.

Sample Bubble Series

var bubbleDataSample = new BubbleDataSample();       var numericXAxis = new NumericXAxis { Interval = 20, MinimumValue = 0, MaximumValue = 200 };
var numericYAxis = new NumericYAxis { Interval = 20, MinimumValue = 0, MaximumValue = 200 };

BubbleSeries series = new BubbleSeries();
series.XAxis = numericXAxis;
series.YAxis = numericYAxis;
series.XMemberPath = "X";
series.YMemberPath = "Y";
series.RadiusMemberPath = "Radius";
ultraDataChart1.Axes.Add(numericXAxis);
ultraDataChart1.Axes.Add(numericYAxis);
ultraDataChart1.Series.Add(series);
series.DataSource = bubbleDataSample;

Polar Series Overview

The PolarSeries is a group of series that uses the polar (angle, radius) coordinate system instead of the Cartesian coordinate system to plot data. Uses concepts of Scatter Series, and draws attention to uneven intervals or clusters of data. They have been often used to plot scientific data (e.g. wind direction and speed, direction, strength of magnetic field, location of objects in our solar system), as well as highlight the deviation of collected data from predicted results.

Polar Series Minimum Requirements

Similar to all other types of series in the UltraDataChart control, the Polar Series, too, uses the DataSource property to bind data. In fact, all series can be bound to any object that implements the IEnumerable interface (e.g. List, Collection, Queue, Stack). However, with the Polar Series, each item in this object must have two numeric properties (for angle and radius coordinates) that will be mapped using the AngleMemberPath and RadiusMemberPath properties.

Types of Polar Series

  • Area
  • Line
  • Scatter
  • Spline
  • Spline Area

Sample Polar Area Series

UltraDataChart_Polar_Series_01

PolarDataSample polarDataSample = new PolarDataSample();
var numericAngleAxis = new NumericAngleAxis();
var numericRadiusAxis = new NumericRadiusAxis();
this.DataChart.Axes.Add(numericAngleAxis);
this.DataChart.Axes.Add(numericRadiusAxis);
PolarAreaSeries series = new PolarAreaSeries();
series.DataSource = polarDataSample;
series.AngleMemberPath = "Angle";
series.RadiusMemberPath = "Radius";
series.AngleAxis = numericAngleAxis;
series.RadiusAxis = numericRadiusAxis;
this.DataChart.Series.Add(series);

Sample Polar Line Series

UltraDataChart_Polar_Series_02

PolarDataSample polarDataSample = new PolarDataSample();
var numericAngleAxis = new NumericAngleAxis();
var numericRadiusAxis = new NumericRadiusAxis();
this.DataChart.Axes.Add(numericAngleAxis);
this.DataChart.Axes.Add(numericRadiusAxis);
PolarLineSeries series = new PolarLineSeries();
series.DataSource = polarDataSample
series.AngleMemberPath = "Angle";
series.RadiusMemberPath = "Radius";
series.AngleAxis = numericAngleAxis;  
series.RadiusAxis = numericRadiusAxis; 
this.DataChart.Series.Add(series);

Sample Polar Scatter Series

UltraDataChart_Polar_Series_03

PolarDataSample polarDataSample = new PolarDataSample();
var numericAngleAxis = new NumericAngleAxis();
var numericRadiusAxis = new NumericRadiusAxis();
this.DataChart.Axes.Add(numericAngleAxis);
this.DataChart.Axes.Add(numericRadiusAxis);
PolarScatterSeries series = new PolarScatterSeries();
series.DataSource = polarDataSample;
series.AngleMemberPath = "Angle";
series.RadiusMemberPath = "Radius";
series.AngleAxis = numericAngleAxis;
series.RadiusAxis = numericRadiusAxis;
this.DataChart.Series.Add(series);

Sample Polar Spline Series

UltraDataChart_Polar_Series_04

PolarDataSample polarDataSample = new PolarDataSample();
var numericAngleAxis = new NumericAngleAxis();
var numericRadiusAxis = new NumericRadiusAxis();
this.DataChart.Axes.Add(numericAngleAxis);
this.DataChart.Axes.Add(numericRadiusAxis);
PolarSplineSeries series = new PolarSplineSeries();
series.DataSource = polarDataSample;
series.AngleMemberPath = "Angle";
series.RadiusMemberPath = "Radius";
series.AngleAxis = numericAngleAxis;
series.RadiusAxis = numericRadiusAxis;
this.DataChart.Series.Add(series);

Sample Polar Spline Area Series

UltraDataChart_Polar_Series_05 

PolarDataSample polarDataSample = new PolarDataSample();
var numericAngleAxis = new NumericAngleAxis();
var numericRadiusAxis = new NumericRadiusAxis();
this.DataChart.Axes.Add(numericAngleAxis);
this.DataChart.Axes.Add(numericRadiusAxis);
PolarSplineAreaSeries series = new PolarSplineAreaSeries();
series.DataSource = polarDataSample;
series.AngleMemberPath = "Angle";
series.RadiusMemberPath = "Radius";
series.AngleAxis = numericAngleAxis;
series.RadiusAxis = numericRadiusAxis;
this.DataChart.Series.Add(series);

Radial Series Overview

The RadialSeries is a group of series, similar to the PolarSeries that takes data and renders it as a collection of data points wrapped around a circle (rather than stretching along a horizontal line as Category Series behave). It maps a list of categories from the minimum to the maximum of the extent of the chart, and supports the same category grouping mechanisms of Category Series.

Radial Series Minimum Requirements

Similar to all other types of series in the UltraDataChart control, the Radial Series, too, uses the DataSource property to bind data All series can be bound to any object that implements the IEnumerable interface (e.g. List, Collection, Queue, Stack), however, in case of Radial Series, each item in this object must have one numeric data column which is mapped using the ValueMemberPath property of the series and one category data column which is mapped to the Label property of the CategoryAngleAxis. 

Types of Radial Series

  • Pie
  • Column
  • Line
  • Area

Sample Radial Pie Series

UltraDataChart_Radial_Series_01

var DataChart = new UltraDataChart();
CategoryDataSample categoryDataSample = new CategoryDataSample();
var categoryAngleAxis = new CategoryAngleAxis();
categoryAngleAxis.ItemsSource = categoryDataSample;
categoryAngleAxis.Label = "{Category}";
categoryAngleAxis.Interval = 1;
var numericRadiusAxis = new NumericRadiusAxis();
numericRadiusAxis.MinimumValue = 0;
numericRadiusAxis.MaximumValue = 150;
numericRadiusAxis.Interval = 50;
numericRadiusAxis.RadiusExtentScale = 0.8;
numericRadiusAxis.InnerRadiusExtentScale = 0.2;
DataChart.Axes.Add(categoryAngleAxis);
DataChart.Axes.Add(numericRadiusAxis);
RadialPieSeries series = new RadialPieSeries();
series.DataSource = categoryDataSample;
series.ValueMemberPath = "Value";
series.AngleAxis = categoryAngleAxis;
series.ValueAxis = numericRadiusAxis;
series.MarkerType = MarkerType.None;
series.Thickness = 1;
DataChart.Series.Add(series);

Sample Radial Column Series

UltraDataChart_Radial_Series_02

var DataChart = new UltraDataChart();
CategoryDataSample categoryDataSample = new CategoryDataSample();
var categoryAngleAxis = new CategoryAngleAxis();
categoryAngleAxis.ItemsSource = categoryDataSample;
categoryAngleAxis.Label = "{Category}";
categoryAngleAxis.Interval = 1;
var numericRadiusAxis = new NumericRadiusAxis();
numericRadiusAxis.MinimumValue = 0;
numericRadiusAxis.MaximumValue = 150;
numericRadiusAxis.Interval = 50;
numericRadiusAxis.RadiusExtentScale = 0.8;
numericRadiusAxis.InnerRadiusExtentScale = 0.2;
DataChart.Axes.Add(categoryAngleAxis);
DataChart.Axes.Add(numericRadiusAxis);
RadialColumnSeries series = new RadialColumnSeries();
series.DataSource = categoryDataSample;
series.ValueMemberPath = "Value";
series.AngleAxis = categoryAngleAxis;
series.ValueAxis = numericRadiusAxis;
series.MarkerType = MarkerType.None;
series.Thickness = 1;
DataChart.Series.Add(series);

Sample Radial Line Series

UltraDataChart_Radial_Series_03

var DataChart = new UltraDataChart();
CategoryDataSample categoryDataSample = new CategoryDataSample();
var categoryAngleAxis = new CategoryAngleAxis();
categoryAngleAxis.ItemsSource = categoryDataSample;
categoryAngleAxis.Label = "{Category}";
categoryAngleAxis.Interval = 1;
var numericRadiusAxis = new NumericRadiusAxis();
numericRadiusAxis.MinimumValue = 0;
numericRadiusAxis.MaximumValue = 150;
numericRadiusAxis.Interval = 50;
numericRadiusAxis.RadiusExtentScale = 0.8;
numericRadiusAxis.InnerRadiusExtentScale = 0.2;
DataChart.Axes.Add(categoryAngleAxis);
DataChart.Axes.Add(numericRadiusAxis);
RadialLineSeries series = new RadialLineSeries();
series.DataSource = categoryDataSample;
series.ValueMemberPath = "Value";
series.AngleAxis = categoryAngleAxis;
series.ValueAxis = numericRadiusAxis;
series.MarkerType = MarkerType.None;
series.Thickness = 5;
DataChart.Series.Add(series);

Sample Radial Area Series

UltraDataChart_Radial_Series_04

var DataChart = new UltraDataChart();
CategoryDataSample categoryDataSample = new CategoryDataSample();
var categoryAngleAxis = new CategoryAngleAxis();
categoryAngleAxis.ItemsSource = categoryDataSample;
categoryAngleAxis.Label = "{Category}";
categoryAngleAxis.Interval = 1;
var numericRadiusAxis = new NumericRadiusAxis();
numericRadiusAxis.MinimumValue = 0;
numericRadiusAxis.MaximumValue = 150;
numericRadiusAxis.Interval = 50;
numericRadiusAxis.RadiusExtentScale = 0.8;
numericRadiusAxis.InnerRadiusExtentScale = 0.2;
DataChart.Axes.Add(categoryAngleAxis);
DataChart.Axes.Add(numericRadiusAxis);
RadialAreaSeries series = new RadialAreaSeries();
series.DataSource = categoryDataSample;
series.ValueMemberPath = "Value";
series.AngleAxis = categoryAngleAxis;
series.ValueAxis = numericRadiusAxis;
series.MarkerType = MarkerType.Circle;
series.Thickness = 5;
DataChart.Series.Add(series);

Stacked Series Overview

Stacked Series belong to a group of Category Series and they're rendered using a collection of points connected by smooth curves of spine elements (StackedFragmentSeries) that are stacked on top of each other.

Types of Stacked Series

Stacked Spline Series

 

Using_UltraDataChart_Stacked_Spline_Series__01

Stacked Line Series

 

Using_UltraDataChart_Stacked_Line_Series__01
Stacked Column Series

 

Stacked_Column_Series__01
Stacked Bar Series

 

Stacked_Column_Series__02
Stacked Area Series


Stacked_Area_Series__01

Stacked 100-Area Series

 

Stacked_100-Area_Series_01
Stacked 100-Bar Series

 

Using_the_UltraDataChart_Stacked_100-Bar_Series__01

 

Using_the_UltraDataChart_Stacked_100-Bar_Series__02
Stacked 100-Column Series

 

Using_the_UltraDataChart_Stacked_100-Column_Series__01

Using_the_UltraDataChart_Stacked_100-Column_Series__02
Stacked 100-Spline Area Series

 

Stacked_100-Spline_Area_Series__01

Stacked 100-Line & Spline Series

 

Using_UltraDataChart_Stacked_100-Spline_Series__01