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

Last Reply 4 months ago By dharmendr

Posted 4 months ago

How to create ranking chart in angularjs in asp.net 

You are viewing reply posted by: dharmendr 4 months ago.
Posted 4 months 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