Telerik UI for Windows 8 XAML

Overview

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

Scatter Spline Series
Note

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

Example

Here's an example of how to implement RadCartesianChart with the ScatterSplineSeries.

  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.scatterSplineSeries.DataContext = sampleData;
  3. Finally, create a chart using XAML.

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