Add Bezier Chart to asp.net web page guide, rich CSharp sample code, setting skin, orientation, data series, axis

How to Build Bezier Chart using C#

Home > How to > Bezier Chart

Similar to spline chart, the Bezier chart also display data points with a curved line. But different from spline chart, Bezier Chart allows users to determine the position and degree of curvature in the line between the two data points. This tutorial will guide you to create Bezier Chart using C# programming code.

Basic Settings

The basic settings are mainly used to control the general appearance of bezier chart graphics.

C# Code for Setting Chart Type

You can set chart type to bezier chart with either of following two methods.


KaxChart1.SeriesSet[0].View = ChartSeriesView.Bezier;
KaxChart1.SeriesSet[1].View = ChartSeriesView. Bezier;


KaxChart1.DefaultSeriesView = ChartSeriesView. Bezier;

C# Code for Customizing Chart Skin

Rich chart skin options and chart templates are supported.

KaxChart1.Skin = "KetticStyle";

C# Code for Writing Chart Title

Here we offer C# code for adding title to bezier chart, you can rotate the title, define the title font and color, resize the title. If needed, you can view more settings for chart title at setting chart title element in c#.


KaxChart1.Caption.Text = "Bezier Chart";

C# Code for Defining Chart Orientation

Users are able to display the bezier chart either vertically or horizontally.

KaxChart1.SeriesOrientation = ChartSeriesOrientation.Horizontal;
KaxChart1.SeriesOrientation = CartSeriesOrientation.Vertical;

Bezier Settings

The settings in this part are mainly used for adding and creating various data series in bezier chart.

Add Chart Data Series Using C# Code

Making the bezier chart of ASP.NET AJAX, users can easily add multiple data series into bezier chart. And each bezier category will have a bezier group to display its values. In following example, we will show you how to add two data series into web bezier chart. To view more guidance, please follow this link to set chart series element using c#. What should be mentioned specifically here is that users must add (1 + 3 x N) items to each data series when creating bezier chart. This can be counted as a unique feature of bezier chart.


            KaxChart1.SeriesSet[0].AddPoint(1.5, "Point1");
            KaxChart1.SeriesSet[0].AddPoint(4, "Point2");
            KaxChart1.SeriesSet[0].AddPoint(1, "Point3");
            KaxChart1.SeriesSet[0].AddPoint(3.5, "Point4");
            KaxChart1.SeriesSet[0].AddPoint(2, "Point5");
            KaxChart1.SeriesSet[0].AddPoint(1, "Point6");
            KaxChart1.SeriesSet[0].AddPoint(4.7, "Point7");

            KaxChart1.SeriesSet[1].AddPoint(2, "Point1");
            KaxChart1.SeriesSet[1].AddPoint(1, "Point2");
            KaxChart1.SeriesSet[1].AddPoint(5, "Point3");
            KaxChart1.SeriesSet[1].AddPoint(1, "Point4");
            KaxChart1.SeriesSet[1].AddPoint(3, "Point5");
            KaxChart1.SeriesSet[0].AddPoint(2.5, "Point6");
            KaxChart1.SeriesSet[0].AddPoint(2.3, "Point7");

Now two data categories have been successfully added to the bezier chart. And in the real application, we may often need to differentiate each bezier group with different colors so that readers can easily compare the values among different data series. Besides, different legend description can also separate the data categories out. And this performance can be done with the help of following sample C# code.


KaxChart1.SeriesSet[0].StyleSet.Fill.PrimaryColor = System.Drawing.ColorTranslator.FromHtml("#CC3399");
KaxChart1.SeriesSet[1].StyleSet.Fill.PrimaryColor = System.Drawing.ColorTranslator.FromHtml("#660033");

Define Chart Axis Using C# Code

The axis has two dimensions, which are x axis and y axis. To better present the values of each data series, we need to customize the scaling and spacing values of the axis based on our own data source. If the scaling is too large, the bezier chart will be too small to be read. Here we offer sample C# code for defining and customizing both x axis and yaxis settings. If needed, you can view more settings for chart axis at chart axis at set chart axis element with c#.


KaxChart1.Diagram.AxisY.MaxValue = 5;
KaxChart1.Diagram.AxisY.MinValue = 1;
KaxChart1.Diagram.AxisY.Step = 1;
KaxChart1.Diagram.AxisY.LayoutMode = Kettic.ASPX.Controls.Chart.Styles.ChartAxisLayoutMode.Normal;

KaxChart1.Diagram.AxisY.MaxValue = 5;
KaxChart1.Diagram.AxisY.Step = 0.5;
KaxChart1.Diagram.AxisY.AxisMode = ChartAxisYMode.Extended;

Now the configuration of aspx.cs file for creating a bezier chart is completed. If you want to view the output of above configurations, please run our bezier chart online demo.

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control

Overview Getting Started

Chart Element

Diagram Series Axes Legend Caption Tick Data Grid

Chart Type

Bar Chart Point Chart Line Chart Pie Chart Area Chart Gantt Chart Bubble Chart Bezier Chart Spline Chart Spline Area Chart Candle Chart Chart With Stacked Full Stacked Chart

Features

Automatic Layout Automatic Text-wrapping Scrolling Empty Values Scale Break Multiline Labels Wise Labels Marking Areas Multiple Types Interactive Drill Down Shadow Edting

Data Binding

Array Data List Data Database Data XML Data

Chart Style

Chart Skin ASP.NET AJAX Grid UI Control