Gantt Charts guide, UI Control for ASP.NET AJAX, C#, VB.NET, rich aspx smaple code

Gantt Charts in ASP.NET AJAX

Home > How to > Gantt Chart

Information to Gantt Chart

Gantt chart, also can be called Time charts, is usually used for displaying time based separate data values, which contains a beginning and an end. When we need to show a time planning data series, we can plot these data on a gantt chart. For most purpose, the gantt chart is used to make a business plan, and the chart graph view as a schedule. The time span of the schedule is depending on your needs, it may be years, months, days, even hours and minutes.

And like most of other chart type, we can create and view gantt chart in two forms: vertical and horizontal. We can set the chart series orientation property to vertical to create a vertical gantt chart and set the chart series orientation attribute to horizontal to draw a horizontal gantt chart. Please try to make a gantt chart in our free online demo for gantt chart.

Following is a sample image of gantt chart created by KT.UI ASP.NET AJAX Chart Control:

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

How to Build a Simple Gantt Chart

Like we promised, KT.UI for ASP.NET provides not only the advanced and comprehensive chart components, but also the complete developing online guides. Please read this part carefully to be well informed of drawing a simple gantt chart.

First, we need to drag an "AjaxPanel" control to "aspx" file to realize effect of AJAX technique and before we implement following specific operating 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 - gantt chart. After this, we can use chart title, chart orientation and chart skin components to customize gantt chart appearance, and all of which are listed in chart property window.

Chart View: Set the Chart DefaultSeriesView property or ChartSeriesView.View to Gantt.
Chart Caption: Set the ChartCaption.Text property to "Gantt Chart". It will create a chart title on the top of gantt chart. Text font, color, position, rotation are allowed to modify.
Chart Orientation: Set the SeriesOrientation property to Vertical.
Chart Skin: Set the Skin Property to "KetticStyleLite". You can also build template gantt chart in the html.

Besides specifid these properties in aspx design mode, you can also change the basic settings using C# code in aspx.cs.


KaxChart1.DefaultSeriesView = ChartSeriesView.Gantt;
KaxChart1.Skin = " KetticStyleLite";
KaxChart1.Caption.Text = "Gantt  Chart";
KaxChart1.SeriesOrientation = ChartSeriesOrientation.Horizontal;

Gantt Settings

Now, let's come to the most important part of gantt chart - that is how to set data series. Technically speaking, we can display multiple sets of data series within a gantt chart, and the particular data points contained in a series of data are user-defined. If there is only one data series in web gantt chart, the chart graphics will dispaly single timeline in the diagram. If there are multiple data series in the ajax gantt chart, it means the schedule manages two or more planning at the same time. And legend is important to multiple series data in gantt chart, it can separete each time planning more clearly.

Following sample tutorial shows how to add data series, if you have more values need to be shown on gantt chart, you can refer to "ChartSeries. Items" to have a modification.


<kettic:ChartSeries  Name="Series 1"  View="Gantt">
                            <Points>
                                <kettic:ChartSeriesPoint  Value="2"  Value2="3"   Name="Point 1">
                            </kettic:ChartSeriesPoint>
                            <kettic:ChartSeriesPoint  Value="6"  Value2="12"  Name="Point 2">
                            </kettic:ChartSeriesPoint>
                            <kettic:ChartSeriesPoint  Value="13"  Value2="15"  Name="Point 3">
                            </kettic:ChartSeriesPoint>
                            <kettic:ChartSeriesPoint  Value="14"  Value2="10"  Name="Point 4">
                            </kettic:ChartSeriesPoint>
                            <kettic:ChartSeriesPoint  Value="15"  Value2="17"  Name="Point 5">
                            </kettic:ChartSeriesPoint>
                            </Points>
</kettic:ChartSeries>

YValue and YValue2 are the start and end potion of data item in a chart. YValue shows the begin time of one plan in the project schedule, and YVlaue2 shows the stop time of one plan in timeline. Each YValue can show the difference timeline in the chart view. And of course, we can use the method of "ChartSeries.StyleSet.Fill-PrimaryColor" to change the gantt chart color. If you are interested, check out more settings of series: Chart Series Element. For the last, we want to show you how to customize the chart axis in C# .net.


KaxChart1.Diagram.AxisX.MaxValue = 10;
KaxChart1.Diagram.AxisX.MinValue = 1;
KaxChart1.Diagram.AxisX.Step = 1;

KaxChart1.Diagram.AxisY.MaxValue = 20;
KaxChart1.Diagram.AxisY.Step = 2;
KaxChart1.Diagram.AxisY.AxisMode = ChartAxisYMode.Extended;

Information to Gantt Chart

How to Build a Simple Gantt Chart

Basic Settings

Gantt Settings

See Also