Version

Scatter Line Series

This topic explains, with code examples, how to use the ScatterPointSeries in the XamDataChart™ control. Some important conceptual information is provided as well.

In This Topic

This topic contains the following sections:

Introduction

The ScatterLineSeries belongs to a family of Scatter Series that use the Cartesian (x, y) coordinate system to plot data. This series displays the data as a collection of points connected with straight line, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system.

Scatter Series draw attention to uneven intervals or clusters of data. They can highlight the deviation of collected data from predicted results and they are often used to plot scientific and statistical data. The ScatterLineSeries organizes and plots data chronologically (even if the data is not in chronological order before binding) on X-Axis and Y-Axis. The following sections list important conceptual and task-based information on how to use the ScatterLineSeries and its features.

Series Preview

xamDataChart Scatter Series 03.png

Figure 1: Sample implementation of the ScatterLineSeries

Series Appearance

The ScatterLineSeries has the following properties that you can use to customize appearance:

Property Name Property Type Description

double

This property specifies the thickness of lines.

Brush

This property specifies the brush color of lines.

This property specifies shape of markers rendered at location of data points. Defaults to None - no markers.

Brush

This property specifies the outline color of markers.

Brush

This property specifies the fill color of markers.

Data Binding

The ScatterLineSeries uses the ItemsSource property to bind any data object that implements the IEnumerable interface (e.g. List, Collection, Queue, Stack). However, each data item in this object must have two numeric data columns (for X and Y values to position a bubble in the Cartesian coordinate system). These data columns are mapped using XMemberPath and YMemberPath properties.

An example of object that meets the criteria listed above is the BubbleDataSource which you can download use it in your project.

Code Example

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

In XAML:

xmlns:local="clr-namespace:Infragistics.Models;assembly=YourAppName"
...
<ig:XamDataChart >
    <ig:XamDataChart.Resources>
        <local:BubbleDataSource x:Key="data"/>
    </ig:XamDataChart.Resources>
    <ig:XamDataChart.Axes>
        <ig:NumericXAxis x:Name="XAxis" />
        <ig:NumericYAxis x:Name="YAxis" />
    </ig:XamDataChart.Axes>
    <ig:XamDataChart.Series>
        <ig:ScatterLineSeries ItemsSource="{StaticResource data}"
                          XAxis="{Binding ElementName=XAxis}"
                          YAxis="{Binding ElementName=YAxis}"
                          XMemberPath="X"
                          YMemberPath="Y" >
        </ig:ScatterLineSeries>
    </ig:XamDataChart.Series>
</ig:XamDataChart>

In C#:

var data = new BubbleDataSource();
var xAxis = new NumericXAxis();
var yAxis = new NumericYAxis();

var series = new ScatterLineSeries();
series.XAxis = xAxis;
series.YAxis = yAxis;
series.XMemberPath = "X";
series.YMemberPath = "Y";
series.ItemsSource = data;
DataChart.Axes.Add(xAxis);
DataChart.Axes.Add(yAxis);
DataChart.Series.Add(series);

In Visual Basic:

Dim data As New BubbleDataSource()
Dim xAxis As New NumericXAxis()
Dim yAxis As New NumericYAxis()

Dim series As New ScatterLineSeries()
series.ItemsSource = data
series.XMemberPath = "X"
series.YMemberPath = "Y"
series.XAxis = xAxis
series.YAxis = yAxis
Dim chart As New XamDataChart()
chart.Axes.Add(xAxis)
chart.Axes.Add(yAxis)
chart.Series.Add(series)

Dash Array

The ScatterLineSeries supports the ability to apply a dashed line via a dash array. You can do this by setting the DashArray property of the series to a new DoubleCollection with the double[] describing the dash lengths that you wish to see. The following code examples demonstrate how to do this:

In XAML:

<ig:ScatterLineSeries DashArray="5, 5" />

In C#:

var series = new ScatterLineSeries();
series.DashArray = new DoubleCollection(new double[] { 5, 5 });

In Visual Basic:

Dim series = New ScatterLineSeries()
series.DashArray = New DoubleCollection(New Double() {5, 5})

Related Content