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

Line chart is the basic chart type commonly used in variable fields. Line chart is designed to show series of data points, which are named as markers and combined with a straight line to display particular trends within a period of time. Like many chart types, line chart also can contain and display multiple series of data in separate single line. For some reason, you maybe want to flex two or more types to one chart, such as draw line chart and bar chart together, or line chart and point chart together, and Kettic asp.net chart control can do this for you. But stacked line chart is not supported, if you want, you can make stacked bar chart and stacked area chart.
As one of the most comprehensive UI for ASP.NET AJAX libraries, KT.UI for ASP.NET AJAX Line Chart control enables users to easily draw and individualize line chart with rich and mature chart options, for instance, the appearance of each data series can be modified with different color, the line thickness is adjustable, and so on so forth. You can make line chart in our online demo for line chart.
Sample line image created by using KT.UI Chart creating library within ASP.NET application:

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

How to Build a Simple Line Chart

Like we promised, KT.UI for ASP.NET provides not only the advanced and comprehensive chart components, but also the complete developing guides. Please read this part carefully to be well informed of drawing a simple line chart.
First, we need to drag an "AjaxPanel" control to "aspx" file to realize effect of Ajax technique and before we implement following specific operation steps, we need to drag a chart control from toolbox into AjaxPanel.

Basic Settings

At the very beginning, we are supposed to learn how to choose the required chart type - line chart. After this, we can use chart title, chart orientation and chart skin components to customize line chart appearance and template, and all of which are listed in chart property window.
  1. Chart View: Set the Chart DefaultSeriesView property or ChartSeriesView to Line.
  2. Chart Caption: Set the ChartCaption.Text property to "Line Chart". This chart title will display at the top of web chart. Besides, users can set the tooltip proerty for more description of line chart component.
  3. Chart Orientation: Set the SeriesOrientation property to Vertical. Of course, the horizontal orientation is also supported.
  4. Chart Skin: Set the Skin Property to "KetticStyle". It will redraw the viewing of chart by changing the CSS.
Here we supply another way to customize the basic line chart properties as in aspx mode, using C# code to change the settings, you can find it's simple and easy to do.

KaxChart1.SeriesSet[0].View = ChartSeriesView.Line;
KaxChart1.SeriesSet[1].View = ChartSeriesView. Line;
KaxChart1.Skin = "KetticStyle";
KaxChart1.Caption.Text = "Line Chart";
KaxChart1.SeriesOrientation = CartSeriesOrientation.Vertical;

Line Settings

Now, let's come to the most important part of line chart - that is how to set data series. Technically speaking, we can insert multiple sets of data series within a line chart, and the particular data points contained in a series of data are user-defined. Additional, you can define the legend by the data groups, it shows each category name.
Following tutorial codes shows how to add two series of data points, if you have more values need to be shown on line chart, you can refer to "ChartSeries.Items" to have a modification.

<kettic:ChartSeries Name="Series 1" View="Line">
<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="1" Name="Point 5">
</kettic:ChartSeriesPoint>
</Points>
</kettic:ChartSeries>
<kettic:ChartSeries Name="Series 2" View="Line">
<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="2.5" Name="Point 5">
</kettic:ChartSeriesPoint>
</Points>
</kettic:ChartSeries>
Chart series is one of the indispensable elements to char, and of course, we can use the method of "ChartSeries.StyleSet.Fill.PrimaryColor" to define the line color. If you are interested, check out more settings of series: Chart Series Element. In the last part, we will introduce you how to set chart axis in C#, the spacing and scaling of axis are changing the appearance and size of whole line chart graph. Following is some CSharp example code.

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

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

See Also

If you still need the manual on creating line chart using c# programming language, go to: C# codes to build line chart.
ASP.NET AJAX UI Controls