Populate Pie and Doughnut Chart from database using AngularJS and Web API in ASP.Net

Hi skp,

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

Controller

[HttpGet]
public string GetDashboardDetails()
{
    // Get list from database.
    List<Dashboard> dboard = new List<Dashboard>();
    Dashboard db = new Dashboard();
    db.TransitValuePercent = 24;
    db.IssuedValuePercent = 51;
    db.StockValuePercent = 24;
    dboard.Add(db);
    return (new JavaScriptSerializer().Serialize(dboard));
}

public class Dashboard
{
    public int TransitValuePercent { get; set; }
    public int IssuedValuePercent { get; set; }
    public int StockValuePercent { get; set; }
}

View

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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) {
        $scope.PopulateChart = function (chartType) {
            $http.get('/Home/GetDashboardDetails', { headers: { 'Content-Type': 'application/json'} })
            .then(function (response) {
                var labels = ['Transit Value Percent', 'Issued Value Percent', 'Stock Value Percent'];
                var data = [];
                data.push(response.data[0].TransitValuePercent);
                data.push(response.data[0].IssuedValuePercent);
                data.push(response.data[0].StockValuePercent);
                var colors = ['#FFD700', '#FFE4C4', '#7FFFD4'];
                var ctx = document.getElementById("dvCanvas").getContext('2d');
                var myChart = new Chart(ctx, {
                    type: chartType,
                    data: {
                        datasets: [{ data: data, backgroundColor: colors}],
                        labels: labels
                    },
                    options: {
                        title: {
                            display: true,
                            text: 'amount for transit, issued and stock',
                            position: 'top'
                        },
                        responsive: true,
                        tooltips: {
                            callbacks: {
                                label: function (tooltipItem, data) {
                                    var allData = data.datasets[tooltipItem.datasetIndex].data;
                                    var tooltipLabel = data.labels[tooltipItem.index];
                                    var tooltipData = allData[tooltipItem.index];
                                    var total = 0;
                                    for (var i in allData) {
                                        total += allData[i];
                                    }
                                    var tooltipPercentage = Math.round((tooltipData / total) * 100);
                                    //return tooltipLabel + ': ' + tooltipData + ' (' + tooltipPercentage + '%)';
                                    return tooltipPercentage + '%';
                                }
                            }
                        }
                    }
                });
            });
        }
    });
</script>
<div ng-app="MyApp" ng-controller="MyController" align="center">
    <label for="ChartType">
        <input type="radio" name="ChartType" ng-click="PopulateChart('pie')" />Pie
        <input type="radio" name="ChartType" ng-click="PopulateChart('doughnut')" />Doughnut
    </label>
    <hr />
    <canvas id="dvCanvas" ></canvas>
</div>

Screenshot