Click here to Skip to main content
14,365,743 members

Bezier curve for the Microsoft Web Chart control

Rate this:
4.67 (5 votes)
Please Sign up or sign in to vote.
4.67 (5 votes)
17 Mar 2011CPOL
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.


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>();


    #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; }
            //min value is 2
            if (value < 2)
                value = 2;

            //it must be an even number
            if (value % 2 == 1)

            _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
            return _bezierPoints;
            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)
                    this.Points.AddXY(p[i], p[i + 1]);


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>();
    bezierPoints.Add(new DataPoint(0, 0));
    bezierPoints.Add(new DataPoint(3, 5));
    bezierPoints.Add(new DataPoint(5, 2));

    //chart control setup

    //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:

Bezier graph


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


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Rainer Halanek
Software Developer (Senior)
Austria 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.

Comments and Discussions

GeneralMy vote of 5 Pin
all_in_flames23-Mar-11 8:50
professionalall_in_flames23-Mar-11 8:50 
GeneralRe: My vote of 5 Pin
Rainer Halanek29-Mar-11 10:49
memberRainer Halanek29-Mar-11 10:49 
GeneralSome problems Pin
dherrmann22-Mar-11 23:01
memberdherrmann22-Mar-11 23:01 
AnswerRe: Some problems [modified] Pin
Rainer Halanek22-Mar-11 23:41
memberRainer Halanek22-Mar-11 23:41 
GeneralRe: Some problems Pin
dherrmann23-Mar-11 1:18
memberdherrmann23-Mar-11 1:18 
GeneralRe: Some problems Pin
Rainer Halanek23-Mar-11 1:29
memberRainer Halanek23-Mar-11 1:29 
GeneralSome problems Pin
dherrmann22-Mar-11 23:00
memberdherrmann22-Mar-11 23:00 
AnswerRe: Some problems Pin
Rainer Halanek22-Mar-11 23:34
memberRainer Halanek22-Mar-11 23:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Posted 17 Mar 2011

Tagged as


19 bookmarked