How to use spline chart? Any simple example?

[Syaiful Nizam Yahya]

I have tried getting started example which you can see here, https://github.com/syaifulnizamyahya/SfChart

Unfortunately, I want to use spline chart but i dont understand how it works. I tried looking at the documentation here, https://help.syncfusion.com/uwp/sfchart/series#line-and-spline-charts but i dont quite grasp the data structure in the example.

What i want is a spline chart with multiple spline series.

My data series looks like this

public ObservableCollection<Series> ChartSeries { get; set; } = new ObservableCollection<Series>();
public class Series
{
	public ObservableCollection<Curve> Curves { get; set; } = new ObservableCollection<Curve>();
}
 
public class Curve
{
	public ObservableCollection<Point> Points { get; set; } = new ObservableCollection<Point>();
}
public class Point
{
	public double x { get; set; } = default(double);
	public double y { get; set; } = default(double);
}
My xaml is 

<Charts:SplineSeries ItemsSource="{x:Bind ViewModels.ChartSeries}"/>

Im confused on how to bind the data.

Thanks.

[Syaiful Nizam Yahya]

I've managed to use spline series. Right now my problem is how to bind to array of series?

My current xaml

            <Charts:SplineSeries ItemsSource="{x:Bind ViewModels.ChartSeries[0].Points}" XBindingPath="x" YBindingPath="y"/>
            <Charts:SplineSeries ItemsSource="{x:Bind ViewModels.ChartSeries[1].Points}" XBindingPath="x" YBindingPath="y"/>
            <Charts:SplineSeries ItemsSource="{x:Bind ViewModels.ChartSeries[2].Points}" XBindingPath="x" YBindingPath="y"/>
            <Charts:SplineSeries ItemsSource="{x:Bind ViewModels.ChartSeries[3].Points}" XBindingPath="x" YBindingPath="y"/>
            <Charts:SplineSeries ItemsSource="{x:Bind ViewModels.ChartSeries[4].Points}" XBindingPath="x" YBindingPath="y"/>

Instead of manually add the array, how do I bind the series?

Working sample program can be had here, https://github.com/syaifulnizamyahya/SfChart

Thanks.

[Syaiful Nizam Yahya]

I have update the source to use ChartSeriesCollection binded with Chart Series in xaml.

Source here. https://github.com/syaifulnizamyahya/SfChart/tree/f10987215fab92acdc255b5c220d4027b90cd244

In viewmodel

public ChartSeriesCollection SeriesCollection { get; set; } = new ChartSeriesCollection();
 
private void InitSeriesCollection()
{
	Random random = new Random((int)DateTime.Now.Ticks & 0x0000FFFF);
 
	for (int i = 0; i< ChartSeries.Count; i++)
	{
		var splineSeries = new SplineSeries();
		splineSeries.ItemsSource = ChartSeries[i].Points;
		splineSeries.XBindingPath = "x";
		splineSeries.YBindingPath = "y";
		splineSeries.Label = random.Next().ToString();
		SeriesCollection.Add(splineSeries);
	}
}

In xaml(omitted unrelated code)

<Charts:SfChart 
            Series="{x:Bind ViewModels.SeriesCollection}">
                <Charts:SfChart.PrimaryAxis>
                    <Charts:CategoryAxis FontSize="14" Header="Channel" />
                </Charts:SfChart.PrimaryAxis>
 
                <Charts:SfChart.SecondaryAxis>
                    <Charts:NumericalAxis FontSize="14" Header="RSSI" />
                </Charts:SfChart.SecondaryAxis>
 
                <Charts:SfChart.Legend>
                    <Charts:ChartLegend />
                </Charts:SfChart.Legend>
 
            </Charts:SfChart>

Are there any method to bind the array in xaml?

By the way, I cant edit my previous post. I would like to replace the github links with commit github links, as github links will link to latest commit.

Thanks.

[Devi Aruna Maharasi Murugan]

Hi Syaiful,