Bezier Charts guide, UI Control for ASP.NET AJAX, C#, VB.NET, aspx sample code, setting bezier properties

Bezier Charts in ASP.NET AJAX

Home > How to > Bezier Chart

Information to Bezier Chart

The KaxChart control from our UI for ASP.NET AJAX allows users to connect data points within one data series with bezier lines, instead of straight lines. Besides, this chart control also offers lots of properties for users to customize the style and appearance of that Bezier chart.
generate bezier chart image in asp.net ajax using c#

generate bezier chart image in asp.net ajax using c#

How to Build a Simple Bezier Chart

Before following the instructions below, please make sure that you have installed .NET Framework 3.5 or later versions, that you have created a web form in the visual studio and that you have assembled all the necessary ASP.NET AJAX dlls into your ASP.NET project. Besides, to achieve the AJAX effect, you also need to drag an AjaxPanel item into the aspx page and put a chart control from the toolbox into that AjaxPanel.

After you finish above preparing works, you may use the sample codes below for creating a bezier chart graph in your ASP.NET application.

Basic Settings

Users can finish these basic settings for creating a bezier chart within the property window. And here we offer detailed guidance for users to set the chart type, chart title, chart orientation and chart background color in ASP.NET application.

Chart Type: Set the Chart DefaultSeriesView property or ChartSeries.View to Bezier.
Chart Title: Set the ChartCaption.Text property to "Bezier chart". This title label can be rotated, change text color and background color, resize and add border.
Chart Orientation: Set the SeriesOrientation property to Vertical. If needed, you can also set the bezier chart orientation to Horizontal.
Chart Skin: Set the Skin Property to "KetticStyle". Of course, there are much more available options supported for bezier chart skin.

Here we introduce to you how to change the basic setting of chart using C# .net.


KaxChart1.SeriesSet[0].View = ChartSeriesView.Bezier;
KaxChart1.SeriesSet[1].View = ChartSeriesView. Bezier;
KaxChart1.Skin = "KetticStyle";
KaxChart1.Caption.Text = "Bezier Chart";
KaxChart1.SeriesOrientation = ChartSeriesOrientation.Horizontal;

Bezier Settings

This section will show you how to add multiple data series into above created bezier chart and how to customize the number of items and their values within each data series. Different from other chart types, Bezier chart requires that each data series must have (1 + 3 x N) points, total points count must follow this math. And you can freely add more items to the data series using the property ChartSeries.Points.

In the following sample programming code, we will try to insert two different data series into bezier chart in aspx page. Here each data category has seven items.


<kettic:ChartSeries  Name="Series 1"  View="Bezier">
                            <Points>
                                <kettic:ChartSeriesPoint  Value="1.5"  Name="Point  1">
                                </kettic:ChartSeriesPoint >
                                <kettic:ChartSeriesPoint  Value="4"  Name="Point  2">
                                </kettic:ChartSeriesPoint >
                                <kettic:ChartSeriesPoint  Value="1"  Name="Point  3">
                                </kettic:ChartSeriesPoint >
                                <kettic:ChartSeriesPoint  Value="3.5"  Name="Point  4">
                                </kettic:ChartSeriesPoint >
                                <kettic:ChartSeriesPoint  Value="2"  Name="Point  5">
                                </kettic:ChartSeriesPoint >
                                <kettic:ChartSeriesPoint  Value="1"  Name="Point  6">
                                </kettic:ChartSeriesPoint >
                                  <kettic:ChartSeriesPoint  Value="4.7"  Name="Point  7">
                                </kettic:ChartSeriesPoint >                              
                            </Points>
                        </kettic:ChartSeries>
                        <kettic:ChartSeries Name="Series 2"  View="Bezier">
                            <Points>
                                <kettic:ChartSeriesPoint  Value="2"  Name="Point  1">
                                </kettic:ChartSeriesPoint >
                                <kettic:ChartSeriesPoint  Value="1"  Name="Point  2">
                                </kettic:ChartSeriesPoint >
                                <kettic:ChartSeriesPoint  Value="5"  Name="Point  3">
                                </kettic:ChartSeriesPoint >
                                <kettic:ChartSeriesPoint  Value="1"  Name="Point  4">
                                </kettic:ChartSeriesPoint >
                                 <kettic:ChartSeriesPoint  Value="3"  Name="Point  5">
                                </kettic:ChartSeriesPoint >
                                <kettic:ChartSeriesPoint  Value="2.5"  Name="Point  6">
                                </kettic:ChartSeriesPoint >
                                  <kettic:ChartSeriesPoint  Value="2.3"  Name="Point  7">
                                </kettic:ChartSeriesPoint >
                            </Points>
                        </kettic:ChartSeries>

Of course, to better display the comparisons between different data series, you can choose to demonstrate each data category with different bezier line colors by using ChartSeries.StyleSet.Fill-PrimaryColor. Besides, chart axis changing is supported. You can follow the C# sample code below.


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

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

More settings of Series to see Chart Series Element.
And you can view Bezier chart online demo on this page.

Information to Bezier Chart

How to Build a Simple Bezier Chart

Basic Settings

Bezier Settings

Related Bezier Chart Creating Links