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

skp

SOLVED CLOSED ACTIVE ANSWERED
User: skp
Posted: on Jul 22, 2019 04:13 AM
Forum: ASP.Net MVC
Answer: 1
Views: 3465
Sample Code: Download

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',

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 4

Reply
ANSWER
User: dharmendr
Replied: on Jul 23, 2019 04:47 AM
Report

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

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

Company

Explore

Follow us

Contact Us