Bind Gantt Chart from Database in ASP.Net using jQuery Ajax

Hi muhammad12,

Refer below sample.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', { 'packages': ['gantt'] });
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetChartData",
            data: {},
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (response) {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Task ID');
                data.addColumn('string', 'Task Name');
                data.addColumn('string', 'Resource');
                data.addColumn('date', 'Start Date');
                data.addColumn('date', 'End Date');
                data.addColumn('number', 'Duration');
                data.addColumn('number', 'Percent Complete');
                data.addColumn('string', 'Dependencies');

                for (var i = 0; i < response.d.length; i++) {
                    var taskId = response.d[i][0].toString();
                    var taskname = response.d[i][1].toString();
                    var resource = response.d[i][2].toString();
                    var startDate = new Date(response.d[i][3].toString());
                    var enddate = new Date(response.d[i][4].toString());
                    var duration = parseInt(response.d[i][5]);
                    var percentageComplete = parseInt(response.d[i][6]);
                    var dependencies = response.d[i][7].toString();
                    data.addRows([[taskId, taskname, resource, startDate, enddate, duration, percentageComplete, dependencies]]);
                }

                var options = {
                    height: 400, width: 500, gantt: { trackHeight: 30 }
                };

                var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
                chart.draw(data, options);
            }, error: function (response) {
                alert(response.responseText);
            }
        });
    }
</script>
<div id="chart_div"></div>

Code

[System.Web.Services.WebMethod]
public static List<object> GetChartData()
{
    // Get the DataTable from Database.
    System.Data.DataTable dt = new System.Data.DataTable();
    dt.Columns.Add("Task ID", typeof(string));
    dt.Columns.Add("Task Name", typeof(string));
    dt.Columns.Add("Resource", typeof(string));
    dt.Columns.Add("Start Date", typeof(string));
    dt.Columns.Add("End Date", typeof(string));
    dt.Columns.Add("Duration", typeof(int));
    dt.Columns.Add("Percent Complete", typeof(int));
    dt.Columns.Add("Dependencies", typeof(string));

    dt.Rows.Add("2014Spring", "Spring 2014", "spring", new DateTime(2014, 2, 22, 0, 30, 0), new DateTime(2014, 5, 20, 6, 30, 0), null, 100, null);
    dt.Rows.Add("2014Summer", "Summer 2014", "summer", new DateTime(2014, 5, 21, 6, 45, 0), new DateTime(2014, 8, 20, 7, 0, 0), null, 100, null);
    dt.Rows.Add("2014Autumn", "Autumn 2014", "autumn", new DateTime(2014, 8, 21, 7, 4, 0), new DateTime(2014, 11, 20, 7, 30, 0), null, 100, null);
    dt.Rows.Add("2014Winter", "Winter 2014", "winter", new DateTime(2014, 11, 21, 7, 30, 0), new DateTime(2015, 2, 21, 8, 30, 0), null, 100, null);
    dt.Rows.Add("2015Spring", "Spring 2015", "spring", new DateTime(2015, 2, 22), new DateTime(2015, 5, 20), null, 50, null);
    dt.Rows.Add("2015Summer", "Summer 2015", "summer", new DateTime(2015, 5, 21), new DateTime(2015, 8, 20), null, 0, null);
    dt.Rows.Add("2015Autumn", "Autumn 2015", "autumn", new DateTime(2015, 8, 21), new DateTime(2015, 11, 20), null, 0, null);
    dt.Rows.Add("2015Winter", "Winter 2015", "winter", new DateTime(2015, 11, 21), new DateTime(2016, 2, 21), null, 0, null);
    dt.Rows.Add("Football", "Football Season", "sports", new DateTime(2014, 8, 4), new DateTime(2015, 1, 1), null, 100, null);
    dt.Rows.Add("Baseball", "Baseball Season", "sports", new DateTime(2015, 2, 28), new DateTime(2015, 9, 20), null, 14, null);
    dt.Rows.Add("Basketball", "Basketball Season", "sports", new DateTime(2014, 9, 28), new DateTime(2015, 5, 20), null, 86, null);
    dt.Rows.Add("Hockey", "Hockey Season", "sports", new DateTime(2014, 9, 8), new DateTime(2015, 5, 21), null, 89, null);

    List<object> chartData = new List<object>();
    for (int i = 0; i < dt.Rows.Count; i++)
    {
        chartData.Add(new object[] {
            dt.Rows[i][0], dt.Rows[i][1], dt.Rows[i][2], dt.Rows[i][3],dt.Rows[i][4],
            dt.Rows[i][5]==DBNull.Value?0:dt.Rows[i][5], dt.Rows[i][6], dt.Rows[i][7]==DBNull.Value?"":dt.Rows[i][7]
        });
    }

    return chartData;
}

Screenshot