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

Last Reply 26 days ago By dharmendr

Posted 27 days ago

How to display data from database using pie and doughnut charts in angularjs

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/0.10.2/angular-chart.js"></script>
<canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels" chart-options="options" width="207%"></canvas>
<canvas id="doughnut" class="chart chart-doughnut" chart-data="data" chart-labels="labels" chart-options="options" width="207%"></canvas>

 

        [HttpGet]
        [ActionName("GetDashboard")]
        public string GetDashboardDetails()
        {
            SqlDataReader reader = null;
            SqlConnection myConnection = new SqlConnection();
            myConnection.ConnectionString = ConfigurationManager.ConnectionStrings["ERPConnectionString"].ConnectionString;
            SqlCommand sqlCmd = new SqlCommand();
            sqlCmd.CommandType = CommandType.StoredProcedure;
            sqlCmd.CommandText = "REPORT_WH_DASHBOARD";
            sqlCmd.Connection = myConnection;
            myConnection.Open();
            reader = sqlCmd.ExecuteReader();
            List<Dashboard> dboard = new List<Dashboard>();
            Dashboard db = null;
            while (reader.Read())
            {
                db = new Dashboard();
                db.Transit = Convert.ToInt32(reader.GetValue(0));
                db.Issued = Convert.ToInt32(reader.GetValue(1));
                db.Stock = Convert.ToInt32(reader.GetValue(2));
                //db.Total = Convert.ToInt32(reader.GetValue(12));
                db.TransitPercent = Convert.ToInt32(reader.GetValue(4));
                db.IssuedPercent = Convert.ToInt32(reader.GetValue(5));
                db.StockPercent = Convert.ToInt32(reader.GetValue(6));
                db.TransitValue = Convert.ToInt32(reader.GetValue(7));
                db.IssuedValue = Convert.ToInt32(reader.GetValue(8));
                db.StockValue = Convert.ToInt32(reader.GetValue(9));
                db.AverageDays = Convert.ToInt32(reader.GetValue(10));
                dboard.Add(db);
            }
            myConnection.Close();
            return (new JavaScriptSerializer().Serialize(dboard));
        }

 

USE [ERPT]
GO
--EXEC REPORT_WH_DASHBOARD
/****** Object:  StoredProcedure [dbo].[REPORT_WH_DASHBOARD]    Script Date: 7/22/2019 10:46:35 AM ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

ALTER PROCEDURE [dbo].[REPORT_WH_DASHBOARD]
AS
BEGIN
SELECT 421651 AS 'Transit',	
        631251 AS 'Issued',	
	421651 AS 'Stock',
	--SUM(421651 + 631251 + 421651) AS 'Total',
	CAST( ((421651 * 1.0)/  SUM(421651 + 631251 + 421651)) * 100 AS NUMERIC(9,0)) AS 'Transit Percent',
	CAST( ((631251 * 1.0)/  SUM(421651 + 631251 + 421651)) * 100 AS NUMERIC(9,0)) AS 'Issued Percent',
	CAST( ((421651 * 1.0)/  SUM(421651 + 631251 + 421651)) * 100 AS NUMERIC(9,0)) AS 'Stock Percent',
	10000000 AS 'Transit Value',
	21200542 AS 'Issued Value',
	10000000 AS 'Stock Value',
	58 AS 'Average Days'
END
GO

Here, I want to display the amount for transit, issued and stock.

10000000 AS 'Transit Value',
21200542 AS 'Issued Value',
10000000 AS 'Stock Value',
Posted 26 days ago

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