Populate Multi-Series Column Chart from database using AngularJS in ASP.Net

Hi rani,

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

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.1.1/angular-chart.min.js"></script>
<script type="text/javascript">
    var app = angular.module("MyApp", ["chart.js"])
    app.controller("MyController", function ($scope, $http) {
        $http.post("Default.aspx/GetChartData", { headers: { 'Content-Type': 'application/json'} })
        .then(function (response) {
            $scope.labels = response.data.d.Labels;
            $scope.series = response.data.d.Series;
            $scope.data = response.data.d.Data;
        });
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels"
        chart-series="series" />
</div>

Namespaces

C#

using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web.Services;

VB.Net

Imports System.Collections.Generic
Imports System.Data
Imports System.Linq
Imports System.Web.Services

Code

C#

[WebMethod]
public static ChartData GetChartData()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] {
                new DataColumn("Year", typeof(string)),
                new DataColumn("Month",typeof(string)),
                new DataColumn("Amount",typeof(int))});
    dt.Rows.Add("2014", "Jan", 65);
    dt.Rows.Add("2015", "Jan", 59);
    dt.Rows.Add("2016", "Jan", 80);
    dt.Rows.Add("2017", "Jan", 81);
    dt.Rows.Add("2018", "Jan", 56);
    dt.Rows.Add("2019", "Jan", 55);

    dt.Rows.Add("2014", "Feb", 40);
    dt.Rows.Add("2015", "Feb", 28);
    dt.Rows.Add("2016", "Feb", 48);
    dt.Rows.Add("2017", "Feb", 40);
    dt.Rows.Add("2018", "Feb", 19);
    dt.Rows.Add("2019", "Feb", 86);

    dt.Rows.Add("2014", "Mar", 27);
    dt.Rows.Add("2015", "Mar", 90);
    dt.Rows.Add("2016", "Mar", 28);
    dt.Rows.Add("2017", "Mar", 48);
    dt.Rows.Add("2018", "Mar", 40);
    dt.Rows.Add("2019", "Mar", 19);

    ChartData chartData = new ChartData();
    chartData.Labels = (dt.AsEnumerable().Select(p => p.Field<string>("Year"))).Distinct().ToArray();
    chartData.Series = (dt.AsEnumerable().Select(p => p.Field<string>("Month"))).Distinct().ToArray();

    List<int[]> datas = new List<int[]>();
    for (int j = 0; j < chartData.Series.Length; j++)
    {
        datas.Add((dt.AsEnumerable().Where(p => p.Field<string>("Month") == chartData.Series[j])
            .Select(p => p.Field<int>("Amount"))).ToArray());
    }
    chartData.Data = datas;

    return chartData;
}

public class ChartData
{
    public string[] Labels { get; set; }
    public string[] Series { get; set; }
    public List<int[]> Data { get; set; }
}

VB.Net

<WebMethod()>
Public Shared Function GetChartData() As ChartData
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn() {
                        New DataColumn("Year", GetType(String)),
                        New DataColumn("Month", GetType(String)),
                        New DataColumn("Amount", GetType(Integer))})
    dt.Rows.Add("2014", "Jan", 65)
    dt.Rows.Add("2015", "Jan", 59)
    dt.Rows.Add("2016", "Jan", 80)
    dt.Rows.Add("2017", "Jan", 81)
    dt.Rows.Add("2018", "Jan", 56)
    dt.Rows.Add("2019", "Jan", 55)

    dt.Rows.Add("2014", "Feb", 40)
    dt.Rows.Add("2015", "Feb", 28)
    dt.Rows.Add("2016", "Feb", 48)
    dt.Rows.Add("2017", "Feb", 40)
    dt.Rows.Add("2018", "Feb", 19)
    dt.Rows.Add("2019", "Feb", 86)

    dt.Rows.Add("2014", "Mar", 27)
    dt.Rows.Add("2015", "Mar", 90)
    dt.Rows.Add("2016", "Mar", 28)
    dt.Rows.Add("2017", "Mar", 48)
    dt.Rows.Add("2018", "Mar", 40)
    dt.Rows.Add("2019", "Mar", 19)
    Dim chartData As ChartData = New ChartData()
    chartData.Labels = (dt.AsEnumerable().[Select](Function(p) p.Field(Of String)("Year"))).Distinct().ToArray()
    chartData.Series = (dt.AsEnumerable().[Select](Function(p) p.Field(Of String)("Month"))).Distinct().ToArray()
    Dim datas As List(Of Integer()) = New List(Of Integer())()
    For j As Integer = 0 To chartData.Series.Length - 1
        datas.Add((dt.AsEnumerable().Where(Function(p) p.Field(Of String)("Month") = chartData.Series(j)) _
                   .Select(Function(p) p.Field(Of Integer)("Amount"))).ToArray())
    Next

    chartData.Data = datas
    Return chartData
End Function

Public Class ChartData
    Public Property Labels As String()
    Public Property Series As String()
    Public Property Data As List(Of Integer())
End Class

Screenshot