$99 VS $1000+. UI Control for ASP.NET AJAX(contains chart and gridview).
How to Build Spline Chart using C#
Home > How to > Spline Chart
Spline chart is a kind of chart which draws a curved line between data points instead of a straight line. Using spline chart, you can easily estimate the intervening values of multiple data series. And spline chart is a common type for data modeling.
How to create a spline chart in ASP.NET application using C# programming code? Following text will provide you the answers.

Basic Settings

The basic settings are mainly used to control the general appearance of spline chart. Before doing the modification using C# code, you need to drag an AjaxPanel item to aspx page and put a chart control from toolbox to that AjaxPanel.

C# Code for Setting Chart Type

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

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

KaxChart1.DefaultSeriesView = ChartSeriesView.Spline;

C# Code for Customizing Chart Skin

Rich chart skin options are supported. Changing the skin CSS can make a special view to spline web chart.
KaxChart1.Skin = "KetticStyle";

C# Code for Writing Chart Title

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

KaxChart1.Caption.Text = "Spline Chart";

C# Code for Defining Chart Orientation

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

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

Spline Settings

The properties below are mainly about making and inserting various data series in html spline chart.

Add Chart Data Series Using C# Code

Using the spline chart of ASP.NET AJAX, users can easily add one or more data series into spline chart. And each spline category will have a spline group to display its values. In following example, we will show you how to add two data series into spline chart. To view more guidance, please follow this link to set chart series element using c#.

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 spline chart. And in the real application, we may often need to differentiate each spline group with different colors so that readers can easily compare the values among different data series. 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 yaxis. To better present the values of each data series, we need to customize the scaling and spacing v alues of the axis based on our own data source. If the scaling is too large, the spline chart will be too small to be read. Here we offer sample C# code for defining and customizing both x axis and y axis settings. If needed, you can view more settings for chart axis at chart axis at set chart axis element with c#.

KaxChart1.Diagram.AxisX.MaxValue = 5;
KaxChart1.Diagram.AxisX.MinValue = 1;
KaxChart1.Diagram.AxisX.Step = 1;
KaxChart1.Diagram.AxisX.LayoutMode = Kettic.ASPX.Controls.Chart.StylesSet.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 spline chart is completed. If you want to view the output of above configurations, please run our spline chart online demo.
ASP.NET AJAX UI Controls