Populate Timeline Chart from Database using AngularJS in ASP.Net

Last Reply 28 days ago By dharmendr

Posted 29 days ago

How to create timeline chart in angularjs in asp.net

You are viewing reply posted by: dharmendr 28 days ago.
Posted 28 days ago

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