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

Last Reply 27 days ago By dharmendr

Posted 28 days ago

How to create ranking chart in angularjs in asp.net 

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

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