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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use spline chart? Any simple example?

Thread ID:

Created:

Updated:

Platform:

Replies:

127770 Dec 8,2016 04:08 AM UTC Dec 9,2016 12:39 PM UTC UWP 3
loading
Tags: SfChart
Syaiful Nizam Yahya
Asked On December 8, 2016 04:08 AM UTC

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.

Thanks.

Syaiful Nizam Yahya
Replied On 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

Thanks.


Syaiful Nizam Yahya
Replied On 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();
		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 [Syncfusion]
Replied On 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, 

  

  

  

<Page.DataContext> 


        <ViewModels:ChartViewModel/>
 

  

</Page.DataContext> 

  

  

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

  

Sample: SfChartModified 

  

  

Regards, 

Devi 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;