11,430,908 members (70,639 online)

# Bezier curve for the Microsoft Web Chart control

, 17 Mar 2011 CPOL
 Rate this:
Adds a new series that can be used in the MS Web Chart control which will draw a Bezier curve for the construction points you define.

## Introduction

This is an add-on for the Microsoft Web Chart control. It is a new series type that draws a Bezier curve according to the points you pass.

## Using the code

I recently needed a Bezier graph in a web app. The Microsoft Web Chart control (which is actually the Dundas chart control) is a powerful control, so I added the functionality I needed to it. For the calculation of the Bezier curve itself, I used code from a CodeProject article by Tolga Birdal, you can find his work here. I encapsulated his code in a class called `CalcBezierCurve`. Then I created a new class `BezierSeries` which inherits from `System.Web.UI.DataVisualization.Charting.Series`. So you can use it in any chart from the Web Chart control.

```/// <span class="code-SummaryComment"><summary>
</span>/// You can use this Series like any other series in the MS web charting control
/// <span class="code-SummaryComment"></summary>
</span>public class BezierSeries : Series
{
#region fields

private int _pointsOnCurve = 1000;
private List<DataPoint> _bezierPoints = new List<DataPoint>();

#endregion

#region properties

/// <span class="code-SummaryComment"><summary>
</span>    /// Defines how many points the resulting curve will have;
/// min = 2, must eb an even number
/// <span class="code-SummaryComment"></summary>
</span>    public int PointsOnCurve
{
get { return _pointsOnCurve; }
set
{
//min value is 2
if (value < 2)
{
value = 2;
}

//it must be an even number
if (value % 2 == 1)
{
value++;
}

_pointsOnCurve = value;
}
}

/// <span class="code-SummaryComment"><summary>
</span>    /// Points that should be used to calculate the bezier graph
/// <span class="code-SummaryComment"></summary>
</span>    public List<DataPoint> BezierPoints
{
get
{
return _bezierPoints;
}
set
{
if (value != null)
{
_bezierPoints = value;

List<double> ptList = new List<double>();

//convert bezier points to flat list
foreach (DataPoint point in value)
{
}

//bezier curve calculation
CalcBezierCurve bc = new CalcBezierCurve();
double[] ptind = new double[ptList.Count];
double[] p = new double[PointsOnCurve];
ptList.CopyTo(ptind, 0);
bc.Bezier2D(ptind, (PointsOnCurve) / 2, p);

//bezier curve points
this.ChartType = SeriesChartType.Line;

for (int i = 0; i < p.Count(); i = i + 2)
{
}
}
}
}

#endregion
}```

The usage is quite simple (I assume you have a web form with a chart control called `Chart1` on it):

```protected void Page_Load(object sender, EventArgs e)
{
//points to calculate the bezier graph
List<DataPoint> bezierPoints = new List<DataPoint>();

//chart control setup
Chart1.Series.Clear();
Chart1.ChartAreas.Clear();

//bezier points chart
ChartArea bezierPointsArea = new ChartArea("BezierPointsArea");
Series bezierPointSeries = new Series("BezierPoints");
bezierPointSeries.ChartType = SeriesChartType.Point;

foreach (DataPoint bezierPoint in bezierPoints)
{
}

//bezier curve chart
ChartArea bezierCurveArea = new ChartArea("BezierCurveArea");
//create instance of our bezier series
BezierSeries bezierSeries = new BezierSeries();
bezierSeries.Name = "BezierCurve";
//set number of points, default is 1000
bezierSeries.PointsOnCurve = 100;
//set points which should be used to calc the bezier graph
bezierSeries.BezierPoints = bezierPoints;
}```

And this is the result:

## History

• 2011-03-17 V 1.0: Initial version.

## Share

Software Developer (Senior)
Austria
Born and living in Vienna, Austria. Started with Pascal in 1993 and MS-DOS 5.0. After that a little C++ in OS/2 and loads of VBA with Access in Windows 95,98, NT. To get more professionel I started C# in 2002 and did some MCP exams on that. After working for my own company I got hired by different companies. Currently I'm employed at the Federal Chambers of Commerce as a Senior Software Engineer.

 First Prev Next
 My vote of 5 all_in_flames23-Mar-11 8:50 all_in_flames 23-Mar-11 8:50
 Re: My vote of 5 Rainer Halanek29-Mar-11 10:49 Rainer Halanek 29-Mar-11 10:49
 Some problems dherrmann22-Mar-11 23:01 dherrmann 22-Mar-11 23:01
 Re: Some problems [modified] Rainer Halanek22-Mar-11 23:41 Rainer Halanek 22-Mar-11 23:41
 Hi, Looks like a bug in my code. I never thought of the possibility that the data will change . So I guess you set the `BezierPoints `a second time and then your chart is wrong? The problem is that I don't delete the SeriesPoints if you set new `BezierPoints`. I will make a bugifx in the next days. In the meanwhile just add the line `this.Points.Clear()` in the `BezierPoints `setter, right at the beginning, before the `if (value != null)`. One small remark, if you set new `BezierPoints` you have to set a new List, not just adding points to the existing list, otherwise the code in the setter won't fire. HTH, Rainer ____________________________________________________________________ Never underestimate the power of stupid people in large groups. modified on Wednesday, March 23, 2011 6:27 AM
 Re: Some problems dherrmann23-Mar-11 1:18 dherrmann 23-Mar-11 1:18
 Re: Some problems Rainer Halanek23-Mar-11 1:29 Rainer Halanek 23-Mar-11 1:29
 Some problems dherrmann22-Mar-11 23:00 dherrmann 22-Mar-11 23:00
 Re: Some problems Rainer Halanek22-Mar-11 23:34 Rainer Halanek 22-Mar-11 23:34
 Last Visit: 31-Dec-99 19:00     Last Update: 4-May-15 2:25 Refresh 1