$99 VS $1000+. UI Control for ASP.NET AJAX(contains chart and gridview).
Spline Charts in ASP.NET AJAX
Home > How to > Spline Chart

Information to Spline Chart

Unlike line chart that connect data points with straight lines, this spline chart graphics connect the data points with curved lines. And spline chart are often used in project which requires the use of curving fittings, like impulse-response charts.
The KaxChart control allows users to build a fully customized splint chart in aspx web page. And this tutorial will guide you to finish this spline chart task. You can make a spline chart in our free online demo for spline chart.
Following image is a screenshot of a spline chart.
generate spline chart image in asp.net ajax using c#

How to Build a Simple Spline Chart

In this part, we will show you how to create a simple spline chart with two data series and insert the spline chart into an aspx page. Before following the setting guidance below, please make sure that you have created a web form application in visual studio and embedded all necessary dlls into this ASP.NET web application. Another thing that needs to be noted here is that, to achieve the AJAX effect, you need to drag an AjaxPanel item from the toolbox to the target aspx page and put a chart control into that AjaxPanel.
After you finish above operations, please follow the guidance below to configure some settings in aspx file.

Basic Settings

Users can finish these basic settings for creating a spline 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 View: Set the Chart DefaultSeriesView property or ChartSeries.View to Spline.
  • Chart Caption: Set the ChartCaption.Text property to "Spline Chart". Allowing you to rotate the title, change title font and color.
  • Chart Orientation: Set the SeriesOrientation property to Vertical. If needed, you can also set the spline chart orientation to Horizontal.
  • Chart Skin: Set the Skin Property to "KetticStyle". Of course, there are much more available options supported for spline chart skin and templates.
Here we will introduce you how to set the above properties using C# demo code.

KaxChart1.DefaultSeriesView = ChartSeriesView.Spline;
KaxChart1.Skin = "KetticStyle";
KaxChart1.Caption.Text = "Spline Chart";
KaxChart1.SeriesOrientation = ChartSeriesOrientation.Horizontal;

Spline Settings

This section will show you how to add multiple data series into above created spline chart and how to customize the number of items and their values within multiple data series.
In the following sample programming code, we will try to add two different data series into spline chart in aspx web page. Here each data category has seven items. And you can freely add more items to the data series using the property ChartSeries. Items.

<kettic:ChartSeries Name="Series 1" View="Spline">
<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="Spline">
<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 spline colors by using ChartSeries.StyleSet.Fill.PrimaryColor. What's more, specify the chart axis is also supported, you can see the following C# code for details.

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;
More settings of Series to see Chart Series Element.

Related Spline Chart Creating Guidance

ASP.NET AJAX UI Controls