Hi rani,

Populate Timeline Chart from Database using Google API chart and jQuery ChartJS in ASP.Net

Using the above link i have created the example.

Check this example. Now please take its reference and correct your code.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<script type="text/javascript" src="https://unpkg.com/chartjs-chart-timeline@0.2.1/timeline.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', []);
    app.controller('MyController', function ($scope, $http) {
        $http.post("WebService.asmx/GetChartData", { headers: { 'Content-Type': 'application/json'} })
            .success(function (response) {
                var labels = response.d.Labels;
                var datas = response.d.Datasets;
                var dataArray = new Array();
                for (var i = 0; i < datas.length; i++) {
                    var dates = {};
                    var date = new Array();
                    date.push(datas[i].split(','));
                    dates.data = date;
                    dataArray.push(dates);
                }
                var chartData = {
                    "type": "timeline",
                    "data": { "labels": labels, "datasets": dataArray },
                    "options": {
                        "elements": {
                            "showText": false,
                            "textPadding": 4,
                            "colorFunction": function (text, data, dataset, index) {
                                return Color('orange');
                            }
                        }
                    }
                };
                var chart = new Chart(document.querySelector('#chartCanvas'), chartData);
            });
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <canvas id="chartCanvas"></canvas>
</div>

WebService

C#

using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
    [WebMethod]
    public ChartData GetChartData()
    {
        // Get your DataTable from DataBase.
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] {
            new DataColumn("Name"),
            new DataColumn("StartMonth"),
            new DataColumn("EndMonth" ),
            new DataColumn("StartDate"),
            new DataColumn("EndDate") });
        dt.Rows.Add("Brickwork stage", "Jun", "Jun", "2018-06-14", "2018-06-20");
        dt.Rows.Add("Building Contract", "Mar", "Mar", "2018-03-01", "2018-03-16");
        dt.Rows.Add("Doors and windows framing", "May", "May", "2018-05-16", "2018-05-16");
        dt.Rows.Add("Fixout state", "Jul", "Jan", "2018-07-19", "2019-01-05");
        dt.Rows.Add("Frames Installation", "Apr", "May", "2018-04-13", "2018-05-28");
        dt.Rows.Add("Land Excavation", "Mar", "May", "2018-03-26", "2018-05-31");
        dt.Rows.Add("Land Survey", "Mar", "May", "2018-03-19", "2018-05-23");
        dt.Rows.Add("Lockup Stage", "Jun", "Aug", "2018-06-06", "2018-08-02");
        dt.Rows.Add("Practical Completion", "Dec", "Jan", "2018-12-31", "2019-01-02");
        dt.Rows.Add("Roofing", "Jun", "Jun", "2018-06-26", "2018-06-29");
        dt.Rows.Add("Slab / Timber Stumps", "Apr", "Jan", "2018-04-17", "2019-01-03");
        dt.Rows.Add("Supplies", "Mar", "Jul", "2018-03-19", "2018-07-02");
        dt.Rows.Add("Trusses Installation", "May", "Jun", "2018-05-19", "2018-06-01");

        string[] labels = (from p in dt.AsEnumerable()
                           select p.Field<string>("Name")).Distinct().ToArray();
        List<string> datasets = new List<string>();
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            string startDate = dt.Rows[i]["StartDate"].ToString();
            string endDate = dt.Rows[i]["EndDate"].ToString();
            string startMonth = dt.Rows[i]["StartMonth"].ToString();
            string endMonth = dt.Rows[i]["EndMonth"].ToString();
            datasets.Add(startDate + "," + endDate + ",Start : " + startMonth + " - End : " + endMonth);
        }

        ChartData chartData = new ChartData();
        chartData.Labels = labels;
        chartData.Datasets = datasets.ToArray();
        return chartData;
    }

    public class ChartData
    {
        public string[] Labels { get; set; }
        public string[] Datasets { get; set; }
    }
}

VB.Net

Imports System.Collections.Generic
Imports System.Data
Imports System.Linq
Imports System.Web.Services

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebService
    Inherits System.Web.Services.WebService
    <WebMethod()>
    Public Function GetChartData() As ChartData
        ' Get your DataTable from DataBase.
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn() {
                            New DataColumn("Name"),
                            New DataColumn("StartMonth"),
                            New DataColumn("EndMonth"),
                            New DataColumn("StartDate"),
                            New DataColumn("EndDate")})
        dt.Rows.Add("Brickwork stage", "Jun", "Jun", "2018-06-14", "2018-06-20")
        dt.Rows.Add("Building Contract", "Mar", "Mar", "2018-03-01", "2018-03-16")
        dt.Rows.Add("Doors and windows framing", "May", "May", "2018-05-16", "2018-05-16")
        dt.Rows.Add("Fixout state", "Jul", "Jan", "2018-07-19", "2019-01-05")
        dt.Rows.Add("Frames Installation", "Apr", "May", "2018-04-13", "2018-05-28")
        dt.Rows.Add("Land Excavation", "Mar", "May", "2018-03-26", "2018-05-31")
        dt.Rows.Add("Land Survey", "Mar", "May", "2018-03-19", "2018-05-23")
        dt.Rows.Add("Lockup Stage", "Jun", "Aug", "2018-06-06", "2018-08-02")
        dt.Rows.Add("Practical Completion", "Dec", "Jan", "2018-12-31", "2019-01-02")
        dt.Rows.Add("Roofing", "Jun", "Jun", "2018-06-26", "2018-06-29")
        dt.Rows.Add("Slab / Timber Stumps", "Apr", "Jan", "2018-04-17", "2019-01-03")
        dt.Rows.Add("Supplies", "Mar", "Jul", "2018-03-19", "2018-07-02")
        dt.Rows.Add("Trusses Installation", "May", "Jun", "2018-05-19", "2018-06-01")
        Dim labels As String() = (From p In dt.AsEnumerable() Select p.Field(Of String)("Name")).Distinct().ToArray()
        Dim datasets As List(Of String) = New List(Of String)()
        For i As Integer = 0 To dt.Rows.Count - 1
            Dim startDate As String = dt.Rows(i)("StartDate").ToString()
            Dim endDate As String = dt.Rows(i)("EndDate").ToString()
            Dim startMonth As String = dt.Rows(i)("StartMonth").ToString()
            Dim endMonth As String = dt.Rows(i)("EndMonth").ToString()
            datasets.Add(startDate & "," & endDate & ",Start : " & startMonth & " - End : " & endMonth)
        Next
        Dim chartData As ChartData = New ChartData()
        chartData.Labels = labels
        chartData.Datasets = datasets.ToArray()
        Return chartData
    End Function

    Public Class ChartData
        Public Property Labels As String()
        Public Property Datasets As String()
    End Class
End Class

Screenshot