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

You can use Google API chart.

Refer below link for details.

https://developers.google.com/chart/interactive/docs/gallery/timeline

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': ['timeline'] });
    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 container = document.getElementById('timeline');
                var chart = new google.visualization.Timeline(container);
                var dataTable = new google.visualization.DataTable();
                dataTable.addColumn({ type: 'string', id: 'Name' });
                dataTable.addColumn({ type: 'date', id: 'Start' });
                dataTable.addColumn({ type: 'date', id: 'End' });
                for (var i = 0; i < response.d.length; i++) {
                    var name = response.d[i][0].toString();
                    var start = new Date(response.d[i][1].toString());
                    var end = new Date(response.d[i][2].toString());
                    dataTable.addRows([[name, start, end]]);
                }
                var rowHeight = 40;
                var chartHeight = (dataTable.getNumberOfRows() + 1) * rowHeight;
                var options = {
                    timeline: {
                        groupByRowLabel: true,
                        rowLabelStyle: {
                            fontName: 'Arial'
                            , fontSize: 12
                            , color: 'Black'
                        },
                        barLabelStyle: {
                            fontName: 'Arial'
                            , fontSize: 10
                        }
                    },
                    avoidOverlappingGridLines: true
                    , height: chartHeight
                    , width: '100%'
                    // ,colors: ['Orange'] - Set TimeLine Color
                };
                chart.draw(dataTable, options);
            }, error: function (response) {
                alert(response.responseText);
            }
        });
    }
</script>
<div id="timeline" />

Namespaces

C#

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

VB.Net

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

Code

C#

[WebMethod]
public static List<object> 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");

    List<object> chartData = new List<object>();
    for (int i = 0; i < dt.Rows.Count; i++)
    {
        chartData.Add(new object[] { dt.Rows[i]["Name"], dt.Rows[i]["StartDate"], dt.Rows[i]["EndDate"] });
    }

    return chartData;
}

VB.Net

<WebMethod()>
Public Shared Function GetChartData() As List(Of Object)
    ' 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 chartData As List(Of Object) = New List(Of Object)()
    For i As Integer = 0 To dt.Rows.Count - 1
        chartData.Add(New Object() {dt.Rows(i)("Name"), dt.Rows(i)("StartDate"), dt.Rows(i)("EndDate")})
    Next

    Return chartData
End Function

Screenshot