Create Ranking Chart using AngularJS and HTML5 ChartJS in ASP.Net

Hi rani,

To ranking chart you may use line chart.

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

HTML

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope, $http, $window) {
        $http.post("Default.aspx/GetChartData", { headers: { 'Content-Type': 'application/json'} })
        .then(function (response) {
            $scope.ChartData = {
                labels: response.data.d[0],
                data: response.data.d[1]
            };
            var ctx = document.getElementById("dvCanvas").getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'line',
                showInLegend: false,
                data: {
                    datasets: [{
                        data: $scope.ChartData.data,
                        backgroundColor: '#F2F7FD'
                    }],
                    labels: $scope.ChartData.labels
                },
                options: { responsive: false, legend: { display: false} }
            });
        });
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <canvas id="dvCanvas" height="200" width="500"></canvas>
</div>

Namespaces

C#

using System.Linq;

VB.Net

Imports System.Data

Code

C#

[System.Web.Services.WebMethod]
public static List<object> GetChartData()
{
    List<object> chartData = new List<object>();
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] { new DataColumn("Year", typeof(string)), new DataColumn("Count", typeof(int)) });
    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(p => p.Field<string>("Year")).Select(p => p.Field<string>("Year"))).ToArray());
    chartData.Add((dt.AsEnumerable().OrderBy(p => p.Field<string>("Year")).Select(p => p.Field<int>("Count"))).ToArray());

    return chartData;
}

VB.Net

<System.Web.Services.WebMethod()>
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

Screenshot