13,006,530 members (61,562 online)
alternative version

#### Stats

20.8K views
19 bookmarked
Posted 17 Mar 2011

# Bezier curve for the Microsoft Web Chart control

, 17 Mar 2011
 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.

## You may also be interested in...

 Pro

 First Prev Next
 My vote of 5 all_in_flames23-Mar-11 7:50 all_in_flames 23-Mar-11 7:50
 Re: My vote of 5 Rainer Halanek29-Mar-11 9:49 Rainer Halanek 29-Mar-11 9:49
 Some problems dherrmann22-Mar-11 22:01 dherrmann 22-Mar-11 22:01
 Re: Some problems [modified] Rainer Halanek22-Mar-11 22:41 Rainer Halanek 22-Mar-11 22: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 0:18 dherrmann 23-Mar-11 0:18
 Re: Some problems Rainer Halanek23-Mar-11 0:29 Rainer Halanek 23-Mar-11 0:29
 Some problems dherrmann22-Mar-11 22:00 dherrmann 22-Mar-11 22:00
 Re: Some problems Rainer Halanek22-Mar-11 22:34 Rainer Halanek 22-Mar-11 22:34
 Last Visit: 31-Dec-99 18:00     Last Update: 28-Jun-17 22:23 Refresh 1