Click here to Skip to main content
15,867,974 members
Articles / Web Development / ASP.NET
Article

Bezier curve for the Microsoft Web Chart control

Rate me:
Please Sign up or sign in to vote.
4.67/5 (5 votes)
17 Mar 2011CPOL 34K   547   19   8
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.

C#
/// <summary>
/// You can use this Series like any other series in the MS web charting control
/// </summary>
public class BezierSeries : Series
{
    #region fields

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

    #endregion

    #region properties

    /// <summary>
    /// Defines how many points the resulting curve will have;
    /// min = 2, must eb an even number
    /// </summary>
    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;
        }
    }

    /// <summary>
    /// Points that should be used to calculate the bezier graph
    /// </summary>
    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)
                {
                    ptList.Add(point.XValue);
                    ptList.Add(point.YValues[0]);
                }

                //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]);
                }
            }
        }
    }

    #endregion
}

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

C#
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
    Chart1.Series.Clear();
    Chart1.ChartAreas.Clear();

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

    foreach (DataPoint bezierPoint in bezierPoints)
    {
        bezierPointSeries.Points.Add(bezierPoint);
    }

    Chart1.Series.Add(bezierPointSeries);

    //bezier curve chart
    ChartArea bezierCurveArea = new ChartArea("BezierCurveArea");
    Chart1.ChartAreas.Add(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;
    Chart1.Series.Add(bezierSeries);
}

And this is the result:

Bezier graph

History

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

License

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


Written By
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 7:50
professionalall_in_flames23-Mar-11 7:50 
GeneralRe: My vote of 5 Pin
Rainer Halanek29-Mar-11 9:49
Rainer Halanek29-Mar-11 9:49 
GeneralSome problems Pin
dherrmann22-Mar-11 22:01
dherrmann22-Mar-11 22:01 
AnswerRe: Some problems [modified] Pin
Rainer Halanek22-Mar-11 22:41
Rainer Halanek22-Mar-11 22:41 
GeneralRe: Some problems Pin
dherrmann23-Mar-11 0:18
dherrmann23-Mar-11 0:18 
GeneralRe: Some problems Pin
Rainer Halanek23-Mar-11 0:29
Rainer Halanek23-Mar-11 0:29 
GeneralSome problems Pin
dherrmann22-Mar-11 22:00
dherrmann22-Mar-11 22:00 
AnswerRe: Some problems Pin
Rainer Halanek22-Mar-11 22:34
Rainer Halanek22-Mar-11 22:34 
Double post. I'll answer the next one Wink | ;-)
____________________________________________________________________
Never underestimate the power of stupid people in large groups.

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.