ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Populate Timeline Chart from Database using AngularJS in ASP.Net<p>Hi rani,</p> <h1 class="header"><a class="title f16" href="https://www.aspforums.net/Threads/631934/Populate-Timeline-Chart-from-Database-using-Google-API-chart-and-jQuery-ChartJS-in-ASPNet/">Populate Timeline Chart from Database using Google API chart and jQuery ChartJS in ASP.Net</a></h1> <p>Using the above link i have created the example.</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://unpkg.com/chartjs-chart-timeline@0.2.1/timeline.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, []); app.controller(&#39;MyController&#39;, function ($scope, $http) { $http.post(&#34;WebService.asmx/GetChartData&#34;, { headers: { &#39;Content-Type&#39;: &#39;application/json&#39;} }) .success(function (response) { var labels = response.d.Labels; var datas = response.d.Datasets; var dataArray = new Array(); for (var i = 0; i &lt; datas.length; i++) { var dates = {}; var date = new Array(); date.push(datas[i].split(&#39;,&#39;)); dates.data = date; dataArray.push(dates); } var chartData = { &#34;type&#34;: &#34;timeline&#34;, &#34;data&#34;: { &#34;labels&#34;: labels, &#34;datasets&#34;: dataArray }, &#34;options&#34;: { &#34;elements&#34;: { &#34;showText&#34;: false, &#34;textPadding&#34;: 4, &#34;colorFunction&#34;: function (text, data, dataset, index) { return Color(&#39;orange&#39;); } } } }; var chart = new Chart(document.querySelector(&#39;#chartCanvas&#39;), chartData); }); }); &lt;/script&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;canvas id=&#34;chartCanvas&#34;&gt;&lt;/canvas&gt; &lt;/div&gt;</pre> <p><strong><span style="text-decoration: underline;">WebService</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Collections.Generic; using System.Data; using System.Linq; using System.Web.Services; [WebService(Namespace = &#34;http://tempuri.org/&#34;)] [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(&#34;Name&#34;), new DataColumn(&#34;StartMonth&#34;), new DataColumn(&#34;EndMonth&#34; ), new DataColumn(&#34;StartDate&#34;), new DataColumn(&#34;EndDate&#34;) }); dt.Rows.Add(&#34;Brickwork stage&#34;, &#34;Jun&#34;, &#34;Jun&#34;, &#34;2018-06-14&#34;, &#34;2018-06-20&#34;); dt.Rows.Add(&#34;Building Contract&#34;, &#34;Mar&#34;, &#34;Mar&#34;, &#34;2018-03-01&#34;, &#34;2018-03-16&#34;); dt.Rows.Add(&#34;Doors and windows framing&#34;, &#34;May&#34;, &#34;May&#34;, &#34;2018-05-16&#34;, &#34;2018-05-16&#34;); dt.Rows.Add(&#34;Fixout state&#34;, &#34;Jul&#34;, &#34;Jan&#34;, &#34;2018-07-19&#34;, &#34;2019-01-05&#34;); dt.Rows.Add(&#34;Frames Installation&#34;, &#34;Apr&#34;, &#34;May&#34;, &#34;2018-04-13&#34;, &#34;2018-05-28&#34;); dt.Rows.Add(&#34;Land Excavation&#34;, &#34;Mar&#34;, &#34;May&#34;, &#34;2018-03-26&#34;, &#34;2018-05-31&#34;); dt.Rows.Add(&#34;Land Survey&#34;, &#34;Mar&#34;, &#34;May&#34;, &#34;2018-03-19&#34;, &#34;2018-05-23&#34;); dt.Rows.Add(&#34;Lockup Stage&#34;, &#34;Jun&#34;, &#34;Aug&#34;, &#34;2018-06-06&#34;, &#34;2018-08-02&#34;); dt.Rows.Add(&#34;Practical Completion&#34;, &#34;Dec&#34;, &#34;Jan&#34;, &#34;2018-12-31&#34;, &#34;2019-01-02&#34;); dt.Rows.Add(&#34;Roofing&#34;, &#34;Jun&#34;, &#34;Jun&#34;, &#34;2018-06-26&#34;, &#34;2018-06-29&#34;); dt.Rows.Add(&#34;Slab / Timber Stumps&#34;, &#34;Apr&#34;, &#34;Jan&#34;, &#34;2018-04-17&#34;, &#34;2019-01-03&#34;); dt.Rows.Add(&#34;Supplies&#34;, &#34;Mar&#34;, &#34;Jul&#34;, &#34;2018-03-19&#34;, &#34;2018-07-02&#34;); dt.Rows.Add(&#34;Trusses Installation&#34;, &#34;May&#34;, &#34;Jun&#34;, &#34;2018-05-19&#34;, &#34;2018-06-01&#34;); string[] labels = (from p in dt.AsEnumerable() select p.Field&lt;string&gt;(&#34;Name&#34;)).Distinct().ToArray(); List&lt;string&gt; datasets = new List&lt;string&gt;(); for (int i = 0; i &lt; dt.Rows.Count; i++) { string startDate = dt.Rows[i][&#34;StartDate&#34;].ToString(); string endDate = dt.Rows[i][&#34;EndDate&#34;].ToString(); string startMonth = dt.Rows[i][&#34;StartMonth&#34;].ToString(); string endMonth = dt.Rows[i][&#34;EndMonth&#34;].ToString(); datasets.Add(startDate + &#34;,&#34; + endDate + &#34;,Start : &#34; + startMonth + &#34; - End : &#34; + 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; } } } </pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Collections.Generic Imports System.Data Imports System.Linq Imports System.Web.Services &#39; To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. &lt;System.Web.Script.Services.ScriptService()&gt; _ &lt;WebService(Namespace:=&#34;http://tempuri.org/&#34;)&gt; _ &lt;WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)&gt; _ &lt;Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()&gt; _ Public Class WebService Inherits System.Web.Services.WebService &lt;WebMethod()&gt; Public Function GetChartData() As ChartData &#39; Get your DataTable from DataBase. Dim dt As DataTable = New DataTable() dt.Columns.AddRange(New DataColumn() { New DataColumn(&#34;Name&#34;), New DataColumn(&#34;StartMonth&#34;), New DataColumn(&#34;EndMonth&#34;), New DataColumn(&#34;StartDate&#34;), New DataColumn(&#34;EndDate&#34;)}) dt.Rows.Add(&#34;Brickwork stage&#34;, &#34;Jun&#34;, &#34;Jun&#34;, &#34;2018-06-14&#34;, &#34;2018-06-20&#34;) dt.Rows.Add(&#34;Building Contract&#34;, &#34;Mar&#34;, &#34;Mar&#34;, &#34;2018-03-01&#34;, &#34;2018-03-16&#34;) dt.Rows.Add(&#34;Doors and windows framing&#34;, &#34;May&#34;, &#34;May&#34;, &#34;2018-05-16&#34;, &#34;2018-05-16&#34;) dt.Rows.Add(&#34;Fixout state&#34;, &#34;Jul&#34;, &#34;Jan&#34;, &#34;2018-07-19&#34;, &#34;2019-01-05&#34;) dt.Rows.Add(&#34;Frames Installation&#34;, &#34;Apr&#34;, &#34;May&#34;, &#34;2018-04-13&#34;, &#34;2018-05-28&#34;) dt.Rows.Add(&#34;Land Excavation&#34;, &#34;Mar&#34;, &#34;May&#34;, &#34;2018-03-26&#34;, &#34;2018-05-31&#34;) dt.Rows.Add(&#34;Land Survey&#34;, &#34;Mar&#34;, &#34;May&#34;, &#34;2018-03-19&#34;, &#34;2018-05-23&#34;) dt.Rows.Add(&#34;Lockup Stage&#34;, &#34;Jun&#34;, &#34;Aug&#34;, &#34;2018-06-06&#34;, &#34;2018-08-02&#34;) dt.Rows.Add(&#34;Practical Completion&#34;, &#34;Dec&#34;, &#34;Jan&#34;, &#34;2018-12-31&#34;, &#34;2019-01-02&#34;) dt.Rows.Add(&#34;Roofing&#34;, &#34;Jun&#34;, &#34;Jun&#34;, &#34;2018-06-26&#34;, &#34;2018-06-29&#34;) dt.Rows.Add(&#34;Slab / Timber Stumps&#34;, &#34;Apr&#34;, &#34;Jan&#34;, &#34;2018-04-17&#34;, &#34;2019-01-03&#34;) dt.Rows.Add(&#34;Supplies&#34;, &#34;Mar&#34;, &#34;Jul&#34;, &#34;2018-03-19&#34;, &#34;2018-07-02&#34;) dt.Rows.Add(&#34;Trusses Installation&#34;, &#34;May&#34;, &#34;Jun&#34;, &#34;2018-05-19&#34;, &#34;2018-06-01&#34;) Dim labels As String() = (From p In dt.AsEnumerable() Select p.Field(Of String)(&#34;Name&#34;)).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)(&#34;StartDate&#34;).ToString() Dim endDate As String = dt.Rows(i)(&#34;EndDate&#34;).ToString() Dim startMonth As String = dt.Rows(i)(&#34;StartMonth&#34;).ToString() Dim endMonth As String = dt.Rows(i)(&#34;EndMonth&#34;).ToString() datasets.Add(startDate &amp; &#34;,&#34; &amp; endDate &amp; &#34;,Start : &#34; &amp; startMonth &amp; &#34; - End : &#34; &amp; 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</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/jb9ZhCS.jpg" alt="" width="472" height="163" /></span></strong></p>https://www.aspforums.net:443/Threads/527183/Populate-Timeline-Chart-from-Database-using-AngularJS-in-ASPNet/https://www.aspforums.net:443/Threads/527183/Populate-Timeline-Chart-from-Database-using-AngularJS-in-ASPNet/Tue, 23 Jul 2019 05:27:06 GMT