We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to use spline chart? Any simple example?

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 { getset} = new ObservableCollection<Series>();
public class Series
	public ObservableCollection<Curve> Curves { getset} = new ObservableCollection<Curve>();
public class Curve
	public ObservableCollection<Point> Points { getset} = new ObservableCollection<Point>();
public class Point
	public double x { getset} = default(double);
	public double y { getset} = default(double);
My xaml is 
<Charts:SplineSeries ItemsSource="{x:Bind ViewModels.ChartSeries}"/>

Im confused on how to bind the data.


3 Replies

SN Syaiful Nizam Yahya December 8, 2016 07:59 AM UTC

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


SN Syaiful Nizam Yahya December 8, 2016 09:00 AM UTC

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 { getset} = 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();

In xaml(omitted unrelated code)
            Series="{x:Bind ViewModels.SeriesCollection}">
                    <Charts:CategoryAxis FontSize="14" Header="Channel" />
                    <Charts:NumericalAxis FontSize="14" Header="RSSI" />
                    <Charts:ChartLegend />
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.


DA Devi Aruna Maharasi Murugan Syncfusion Team December 9, 2016 12:39 PM UTC

Hi Syaiful, 


Thanks for contacting Syncfusion Support. 


We have analyzed your sample and in order, to bind  the array collection in xaml, we have to set the DataContext as ChartViewModel for the Page as shown in the below code snippet, 










We have modified your sample based on your requirement and it can be downloaded from below link, 


Sample: SfChartModified 





SIGN IN To post a reply.
Live Chat Icon For mobile
Up arrow icon