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

Last Reply 4 months ago By dharmendr

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