This project is read-only.

Make a curve chart

Jun 7, 2013 at 9:23 AM
Hi Vinoth,

I'm very happy when i see your wpf tookit. It's easy for utilize.

I have a question. I want to create a curve chart (for ex: Bezier). I utilize SplineSeries for make it.
I want to add controls points with the goal that i can move this curve.

<sparrow:SplineSeries PointsSource="{Binding Collection}" XPath="X" YPath="Y" Background="#FFFF9393" BorderBrush="#FFB11919" OpacityMask="#FFC16B6B" Width="3" Height="3">
<Point X="3" Y="46.7"/>

This point don't display on my chart. I don't know how i can add the color and the width of this point (such as your example)

Thanks for your answer and your advise for make a curve chart.

Ps: I'm sorry because your english is not good.

Jun 7, 2013 at 10:28 AM

Thanks for supporting Sparrow Toolkit.

The control points for the spline series is automatically calculated based on the datas. You cannot give the control points to it.
You can only customize the spline series Stroke and StrokeThickness and You can't set the Height and Width for any series
<sparrow:SplineSeries PointsSource="{Binding Collection}" Stroke="Blue" XPath="X" YPath="Y" StrokeThickness="4"/>
I have created a basic spline chart and please find the sample in the below link this might helpful to to create a basic spline series.

Please let me know if you need more information

Vinoth Kumar J
Jun 7, 2013 at 1:28 PM

I didn't see control points on my chart. This is my collection:

private void GenerateData()
        Collection.Add(new Cout(1, 138));
        Collection.Add(new Cout(2, 254.4));
        Collection.Add(new Cout(3, 360));
        Collection.Add(new Cout(4, 460.8));
        Collection.Add(new Cout(5, 552));
        Collection.Add(new Cout(6, 633.6));
        Collection.Add(new Cout(7, 655.2));
        Collection.Add(new Cout(8, 676.8));
        Collection.Add(new Cout(9, 698.4));
        Collection.Add(new Cout(10, 720));
I make it such as your example on CodePlex. I added ControlPoints="{Binding Path=Collection}" (same Collection with PointSource)

<sparrow:SplineSeries Name="Curve" PointsSource="{Binding Collection}" XPath="X" YPath="Y" Width="3" Height="3" Background="#FF1AC71A" BorderBrush="#FF97C400" Stroke="Blue" StrokeThickness="4" ControlPoints="{Binding Path=Collection}">

But it didn't display these points on my chart. Furthermore, this chart display wrong my datas on axis Y.
Can I change style of these controls points ?

Thanks for your answer.

Ps: You can upload your demo on other server ? I can't access on this server.

Jun 7, 2013 at 1:39 PM
Hi Nhat,

You cannot give the control points to Spline Series and also Width="3" Height="3" Background="#FF1AC71A" BorderBrush="#FF97C400" these properties are not working with Series. You don't need these properties in Chart Series.
You can only set the following properties.
<sparrow:SplineSeries Name="Curve" PointsSource="{Binding Collection}" XPath="X" YPath="Y" Stroke="Blue" StrokeThickness="4"> 
Spline Series Sample

Vinoth Kumar J
Jun 7, 2013 at 1:54 PM
I want to have des big points and i can move these points on my curve. Can I make un curve such as your demo ?

In this demo, it have big points (color) on a curve. I want to make un curve dynamic like this :D

Ps: I'm sorry. I want to upload my picture on CodePlex but i can't acces.
Jun 7, 2013 at 7:04 PM
Edited Jun 7, 2013 at 7:05 PM
It seems that there was a small problem at the end of the chart.
It didn't display well the value .

Thanks for your answer!

Jun 11, 2013 at 8:36 AM

Sorry for the delay in the response.

If you want display the end of the series points you need to set MinValue and MaxValue of the Axis like as below
                    <sparrow:LinearXAxis MinValue="0" MaxValue="6" Interval="1"/>
                    <sparrow:LinearYAxis MinValue="0" MaxValue="11" Interval="1"/>
Curve Chart
Jun 11, 2013 at 9:28 AM
Thank you so much.

Can you give me a example about create big points on my curve. I want to move these big points (they are points in my data). Then, I can change my curve according to these points such as a curve Bezier.

Thanks again.

Jun 11, 2013 at 5:35 PM
Hi Nhat,

Sorry, you cannot perform Bezier like operations on SplineSeries. Because its control points automatically calculated based on the data points give to PointsSource, you cannot give control points to data points.

Please let me know if you need more about this.

Vinoth Kumar J