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

Hi EmadKhan,

Refering the below link i have created the example.

https://jsfiddle.net/fanthos/8vrme4bt/

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

HTML

<canvas id="chartCanvas" ></canvas>
<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://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">
    $(function () {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetChartData",
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "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($('#chartCanvas')[0], chartData);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    });
</script>

Namespaces

C#

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

VB.Net

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

Code

C#

[WebMethod]
public static 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

<WebMethod()>
Public Shared 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

Screenshot