Add Gantt Chart guide in ASP.NET, rich C# sample code for gantt chart style, title, orientation, data series, axis

How to Build Gantt Chart Using C#

Home > How to > Gantt Chart

KT.UI C# ASP.NET AJAX Chart Library is developed by integrating web chart APIs and methods together with web UI's toolbar control items to offer developers and end users rich options in drawing and customizing gantt chart. And we will display the complete C# sample codes for creating gantt chart in this page. The most use of gantt chart is to make a planning in business or projects. The schedule drew by the web gantt chart has the start time and end time to each plan, so that people can make good management to their projects.
In this online article, we will show you the free tutorials of building an html gantt chart using C# sample codes.

First, please check out the essential steps for using KT.UI C# ASP.NET chart control: drag an "AjaxPanel" control to "aspx" page and a chart control to "AjaxPanel" from Toolbox, after this, we can modify the related chart properties by calling and adding C# codes in "aspx.cs" file. Specific processes will be included in following two parts.

Basic Settings

Use C# Codes to Select Gantt Chart Type

Just like the operation described before, after we have added and chart control from Toolbox, we can refer to compliant C# codes to set the chart type. With the rich chart creating options, we can select gantt chart type in two ways:


KaxChart1.SeriesSet[0].View = ChartSeriesView.Gantt;


KaxChart1.DefaultSeriesView = ChartSeriesView.Gantt;

Use C# Codes to Set Chart Style

To meet variable visualization needs, we still provide rich components to customize gantt chart color and background color and skin to specialize your chart. Following C# code is for changing gantt chart skin.


KaxChart1.Skin = " KetticStyleLite";

Use C# Codes to Set Chart Title

We can use KT.UI C# ASP.NET Chart title control to add a suitable title to gantt chart to display the chart theme. And title rotation, position, text font and color are supported. For more information, please link to: set chart title element in c# project.


KaxChart1.Caption.Text = "Gantt  Chart";

Use C# Codes to Set Chart Orientation

It depends on your own needs to display gantt chart in vertical or horizontal form. If we want to create a horizontal gantt chart, set the chart series orientation to horizontal, if we need to draw a vertical gantt chart, switch the chart series orientation to vertical.


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

Gantt Settings

Set Chart Series Using C# Codes

There is no limitation on setting how many sets of data points to a gantt chart; we can add one or more series of data, displaying on a separate gantt. C# sample codes below demonstrate how to add two series of data to gantt chart. For detailed chart series information, check how to set chart series element using c#.


            ChartSeriesPoint Point1 = new ChartSeriesPoint();
            Point1.Name = "Point 1";
            Point1.Value = 2;
            Point1.Value2 = 3;
            this.KaxChart1.SeriesSet[0].Points.Add(Point1);
            ChartSeriesPoint Point2 = new ChartSeriesPoint();
            Point2.Name = "Point 2";
            Point2.Value = 6;
            Point2.Value2 = 12;
            this.KaxChart1.SeriesSet[0].Points.Add(Point2);
            ChartSeriesPoint Point3 = new ChartSeriesPoint();
            Point3.Name = "Point 3";
            Point3.Value = 13;
            Point3.Value2 = 15;
            this.KaxChart1.SeriesSet[0].Points.Add(Point3);
            ChartSeriesPoint Point4 = new ChartSeriesPoint();
            Point4.Name = "Point 4";
            Point4.Value = 14;
            Point4.Value2 = 10;
            this.KaxChart1.SeriesSet[0].Points.Add(Point4);
            ChartSeriesPoint Point5 = new ChartSeriesPoint();
            Point5.Name = "Point 5";
            Point5.Value = 15;
            Point5.Value2 = 17;
            this.KaxChart1.SeriesSet[0].Points.Add(Point5);

Following C# demo codes are for customizing gantt chart's color to have a better visualization effect. Users can set different color to different data series, so that the gantt chart graph will display in multiple colors. Each color stands for one timeline of your project plan, and make the schedule clear to view.


KaxChart1.SeriesSet[0].Appearance.Fill.PrimaryColor = System.Drawing.ColorTranslator.FromHtml("#009933");

Set Chart Axis Using C# Codes

X and Y axes are contained in gantt chart to display different values and general trend. And generally speaking, x axis represents categories, and y axis stands for values. We can precisely set the scale and space of two axes to display data series more accurately and clearly. See C# codes below.


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;

If you want to see the online gantt demo image of gantt chart, you can go to: gantt chart online demo.

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control

Overview Getting Started

Chart Element

Diagram Series Axes Legend Caption Tick Data Grid

Chart Type

Bar Chart Point Chart Line Chart Pie Chart Area Chart Gantt Chart Bubble Chart Bezier Chart Spline Chart Spline Area Chart Candle Chart Chart With Stacked Full Stacked Chart

Features

Automatic Layout Automatic Text-wrapping Scrolling Empty Values Scale Break Multiline Labels Wise Labels Marking Areas Multiple Types Interactive Drill Down Shadow Edting

Data Binding

Array Data List Data Database Data XML Data

Chart Style

Chart Skin ASP.NET AJAX Grid UI Control