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

Last Reply one month ago By dharmendr

Posted one month ago

How to create Multi-Series Column Chart from database using google chart directive in AngularJS.

How to bind this data from database.

Sample data like below.

Year  Month Amount
===================
2014    Jan    65
2015    Jan    59
2016    Jan    80
2017    Jan    81
2018    Jan    56
2019    Jan    55

2014    Feb    40
2015    Feb    28
2016    Feb    48
2017    Feb    40
2018    Feb    19
2019    Feb    86

2014    Mar    27
2015    Mar    90
2016    Mar    28
2017    Mar    48
2018    Mar    40
2019    Mar    19

 

Posted one month ago Modified on one month ago

Hi rani,

Here i have created the example with chart.js directive.

Refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <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) {
            $scope.labels = ['2014', '2015', '2016', '2017', '2018', '2019'];
            $scope.series = ['Jan', 'Feb', 'Mar'];
            $scope.data = [[65, 59, 80, 81, 56, 55], [40, 28, 48, 40, 19, 86], [27, 90, 28, 48, 40, 19]];
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels"
            chart-series="series" />
    </div>
</body>
</html>

Demo

If you want to use google chart directive refer below link.

https://www.codeproject.com/Articles/1189018/Custom-Directive-for-Creating-Chart-using-AngularJ


Posted one month ago

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