Telerik UI for Windows 8 XAML

Overview

The ScatterLineSeries are represented on the chart as data points connected with straight line segments as shown on the image below.

Scatter Line Series

Properties

Note

ScatterLineSeries class inherits from the ScatterPointSeries class - See the inherited properties.

  • Stroke (Brush): Gets or setst the Brush instance that defines the stroke of the line used to present the series.

  • StrokeThickness (double): Gets or sets the thickness of the line used to present the series.

Example

Here's an example of how to implement a RadCartesianChart with ScatterLineSeries.

  1. First, create a class for the sample data.

    C# Copy imageCopy
    public class Data
    {
        public double Category { get; set; }
    
        public double Value { get; set; }
    }
  2. Then, create the sample data.

    C# Copy imageCopy
    List<Data> sampleData = new List<Data>();
    sampleData.Add(new Data() { Category = 2, Value = 3 });
    sampleData.Add(new Data() { Category = 3, Value = 4 });
    sampleData.Add(new Data() { Category = 4, Value = 5 });
    sampleData.Add(new Data() { Category = 5, Value = 6 });
    sampleData.Add(new Data() { Category = 6, Value = 5 });
    sampleData.Add(new Data() { Category = 7, Value = 4 });
    sampleData.Add(new Data() { Category = 8, Value = 3 });
    sampleData.Add(new Data() { Category = 9, Value = 4 });
    sampleData.Add(new Data() { Category = 10, Value = 5 });
    sampleData.Add(new Data() { Category = 11, Value = 4 });
    sampleData.Add(new Data() { Category = 12, Value = 3 });
    sampleData.Add(new Data() { Category = 13, Value = 2 });
    sampleData.Add(new Data() { Category = 14, Value = 1 });
    
    this.scatterLineSeries.DataContext = sampleData;
  3. Finally, create a chart using XAML.

    XAML Copy imageCopy
    <telerik:RadCartesianChart x:Name="scatterLineSeries">
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis/>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:LinearAxis/>
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:ScatterLineSeries ItemsSource="{Binding}">
            <telerik:ScatterLineSeries.XValueBinding>
                <telerik:PropertyNameDataPointBinding PropertyName="Category"/>
            </telerik:ScatterLineSeries.XValueBinding>
            <telerik:ScatterLineSeries.YValueBinding>
                <telerik:PropertyNameDataPointBinding PropertyName="Value"/>
            </telerik:ScatterLineSeries.YValueBinding>
        </telerik:ScatterLineSeries>
    </telerik:RadCartesianChart>