Telerik UI for Windows 8 XAML

Overview

When using ScatterSplineAreaSeries the data points are connected with straight line segments and the area enclosed by the line and the coordinate axis may be optionally stroked and/or filled as shown on the image below.

Scatter Spline Area Series
Note

ScatterSplineAreaSeries class inherits from the ScatterAreaSeries class - See the inherited properties.

Example

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

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

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