Click here to Skip to main content
Click here to Skip to main content

Bezier curve for the Microsoft Web Chart control

, 17 Mar 2011
Rate this:
Please Sign up or sign in to vote.
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)
                {
                    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):

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)

Share

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 Pinmemberall_in_flames23-Mar-11 7:50 
GeneralRe: My vote of 5 PinmemberRainer Halanek29-Mar-11 9:49 
GeneralSome problems Pinmemberdherrmann22-Mar-11 22:01 
AnswerRe: Some problems [modified] PinmemberRainer Halanek22-Mar-11 22:41 
GeneralRe: Some problems Pinmemberdherrmann23-Mar-11 0:18 
Hello,
 
this little row of code (this.Points.Clear()) made it!
Thanks for the Tipp!!
 

Greetings from Salzburg...
Dietrich
GeneralRe: Some problems PinmemberRainer Halanek23-Mar-11 0:29 
GeneralSome problems Pinmemberdherrmann22-Mar-11 22:00 
AnswerRe: Some problems PinmemberRainer Halanek22-Mar-11 22:34 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140827.1 | Last Updated 17 Mar 2011
Article Copyright 2011 by Rainer Halanek
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid