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.Create Ranking Chart using AngularJS and HTML5 ChartJS in ASP.Net<p>Hi&nbsp;rani,</p> <p>To&nbsp;ranking chart you may use line chart.</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;//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.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, $window) { $http.post(&#34;Default.aspx/GetChartData&#34;, { headers: { &#39;Content-Type&#39;: &#39;application/json&#39;} }) .then(function (response) { $scope.ChartData = { labels: response.data.d[0], data: response.data.d[1] }; var ctx = document.getElementById(&#34;dvCanvas&#34;).getContext(&#39;2d&#39;); var myChart = new Chart(ctx, { type: &#39;line&#39;, showInLegend: false, data: { datasets: [{ data: $scope.ChartData.data, backgroundColor: &#39;#F2F7FD&#39; }], labels: $scope.ChartData.labels }, options: { responsive: false, legend: { display: false} } }); }); }); &lt;/script&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;canvas id=&#34;dvCanvas&#34; height=&#34;200&#34; width=&#34;500&#34;&gt;&lt;/canvas&gt; &lt;/div&gt;</pre> <p><strong><span style="text-decoration: underline;">Namespaces</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Linq;</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Data</pre> <p><strong><span style="text-decoration: underline;">Code</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">[System.Web.Services.WebMethod] public static List&lt;object&gt; GetChartData() { List&lt;object&gt; chartData = new List&lt;object&gt;(); DataTable dt = new DataTable(); dt.Columns.AddRange(new DataColumn[] { new DataColumn(&#34;Year&#34;, typeof(string)), new DataColumn(&#34;Count&#34;, typeof(int)) }); dt.Rows.Add(&#34;2000&#34;, 259); dt.Rows.Add(&#34;2001&#34;, 128); dt.Rows.Add(&#34;2002&#34;, 656); dt.Rows.Add(&#34;2003&#34;, 869); dt.Rows.Add(&#34;2004&#34;, 646); dt.Rows.Add(&#34;2005&#34;, 258); dt.Rows.Add(&#34;2006&#34;, 610); dt.Rows.Add(&#34;2007&#34;, 50); dt.Rows.Add(&#34;2008&#34;, 756); dt.Rows.Add(&#34;2009&#34;, 928); dt.Rows.Add(&#34;2010&#34;, 456); dt.Rows.Add(&#34;2011&#34;, 356); dt.Rows.Add(&#34;2012&#34;, 756); dt.Rows.Add(&#34;2013&#34;, 123); dt.Rows.Add(&#34;2014&#34;, 462); dt.Rows.Add(&#34;2015&#34;, 512); dt.Rows.Add(&#34;2016&#34;, 639); dt.Rows.Add(&#34;2017&#34;, 750); dt.Rows.Add(&#34;2018&#34;, 12); dt.Rows.Add(&#34;2019&#34;, 49); chartData.Add((dt.AsEnumerable().OrderBy(p =&gt; p.Field&lt;string&gt;(&#34;Year&#34;)).Select(p =&gt; p.Field&lt;string&gt;(&#34;Year&#34;))).ToArray()); chartData.Add((dt.AsEnumerable().OrderBy(p =&gt; p.Field&lt;string&gt;(&#34;Year&#34;)).Select(p =&gt; p.Field&lt;int&gt;(&#34;Count&#34;))).ToArray()); return chartData; }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">&lt;System.Web.Services.WebMethod()&gt; Public Shared Function GetChartData() As List(Of Object) Dim chartData As List(Of Object) = New List(Of Object)() Dim dt As DataTable = New DataTable() dt.Columns.AddRange(New DataColumn() {New DataColumn("Year", GetType(String)), New DataColumn("Count", GetType(Integer))}) dt.Rows.Add("2000", 259) dt.Rows.Add("2001", 128) dt.Rows.Add("2002", 656) dt.Rows.Add("2003", 869) dt.Rows.Add("2004", 646) dt.Rows.Add("2005", 258) dt.Rows.Add("2006", 610) dt.Rows.Add("2007", 50) dt.Rows.Add("2008", 756) dt.Rows.Add("2009", 928) dt.Rows.Add("2010", 456) dt.Rows.Add("2011", 356) dt.Rows.Add("2012", 756) dt.Rows.Add("2013", 123) dt.Rows.Add("2014", 462) dt.Rows.Add("2015", 512) dt.Rows.Add("2016", 639) dt.Rows.Add("2017", 750) dt.Rows.Add("2018", 12) dt.Rows.Add("2019", 49) chartData.Add((dt.AsEnumerable().OrderBy(Function(p) p.Field(Of String)("Year")).[Select](Function(p) p.Field(Of String)("Year"))).ToArray()) chartData.Add((dt.AsEnumerable().OrderBy(Function(p) p.Field(Of String)("Year")).[Select](Function(p) p.Field(Of Integer)("Count"))).ToArray()) Return chartData End Function</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/JX8OBE6.jpg" alt="" width="472" height="181" /></span></strong></p>https://www.aspforums.net:443/Threads/129638/Create-Ranking-Chart-using-AngularJS-and-HTML5-ChartJS-in-ASPNet/https://www.aspforums.net:443/Threads/129638/Create-Ranking-Chart-using-AngularJS-and-HTML5-ChartJS-in-ASPNet/Thu, 25 Jul 2019 04:04:54 GMT