$99 VS $1000+. UI Control for ASP.NET AJAX(contains chart and gridview).
How to Build Spline Area Chart using C#
Home > How to > Spline Area Chart
Spline area chart is an area chart that displays data series by plotting each data point with filled curves. And this article will provide you a C#.NET programming tutorial to create a spline area chart in aspx web application.
First of all, to achieve the AJAX effect, please put an AjaxPanel item from the toolbox into your aspx page and then drag a chart control to that AjaxPanel. Now we need to modify some configurations in the aspx.cs file by adding some C# code.

Basic Settings

C# Code to Set Chart Type

Open your aspx.cs file and add either of following two snippets of C# codes. Then the chart will be displayed in the form of spline area chart.

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

KaxChart1.DefaultSeriesView = ChartSeriesView. SplineArea;

C# Code for Designing Chart Appearance

The spline area chart of our ASP.NET AJAX offers rich chart skin, background and templates options to meet users' needs. These properties can make the visualization of your spline area chart graph more special.
KaxChart1.Skin = "KetticStyle";

C# Code to Set Chart Title

In the practical application, we may add a chart title so that viewers can better understand the spline area chart. Resizing, rotating, changing font, color and position are all supported to the chart title. Besides, you can find more chart title setting guidance at setting chart title element in c#.

KaxChart1.Caption.Text = "Spline Area Chart";

C# Code to Define Chart Orientation

You can display the spline area chart either vertically or horizontally.

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

Spline Area Settings

From this part, you will find sample C# code for adding data series to above created spline area chart. Both single and multiple series data are supported.

How to Modify Chart Data Series Using C#

The spline area chart can has one or more data series, which is determined by your source data categories. And users are free to add items to each data series. The sample C# code below is used to display two different data series in the spline area 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(1, "Point5");

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(2.5, "Point5");
Of course, if you want to differentiate each series in a more direct way, you can also use following C# code to display each data category in your pre-defined colors.

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

How to Customize Chart Axis Using C# Code

To better visualize the data points and clearly display the trends of each data series, we need to set the chart axis based on the source data. And here we offer two snippets of sample C# codes to guide you for setting the x axis and yaxis dimensions of spline area chart respectively. If you want to view more chart axis setting guidance, please visit this 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.Styles.ChartAxisLayoutMode.Normal;

KaxChart1.Diagram.AxisY.MaxValue = 5;
KaxChart1.Diagram.AxisY.Step = 0.5;
KaxChart1.Diagram.AxisY.AxisMode = ChartAxisYMode.Extended;
Now the settings for building a simple spline area chart are finished. And you are free to run our spline area chart free online demo to view the output of these spline area chart settings. If you have any problems or suggestions in the process of testing these sample C# code, please feel free to contact us.
ASP.NET AJAX UI Controls