Chart.js Doughnut Chart MVC C#

-
     In this Section, We See about How to Display Doughnut Chart Using Chart.js in MVC C# Jquery, Ajax Services. Already we see Chart.js PieCharts. In this section, I am Using SQL Server Database and Create One Ajax Services For Data Get. and Using Chart.js Tool.

View Page:-


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>DoughnutChart</title>
   
   
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="~/Scripts/ChartJs/charts/Chart.js"></script>
   
    <script type="text/javascript">
        $(document).ready(function () {
            Disp();
        });


        function Disp() {

            $.ajax({
                cache: false,
                async: false,
                type: "POST",
                dataType: "Json",
                contentType: "application/json; charset=utf-8",
                url: "/ChartjsDoughnut/DispRec",
                data: {},
                success: function (data) {
                    var len = data.length;

                    var DoughnutData = []

                    for (var i = 0; i < len; i++) {
                        DoughnutData.push({
                            value: parseFloat(data[i].yVal),
                            color: getRandomColor(),
                            label: data[i].name,
                            labelColor: 'white',
                            labelFontSize: '16'
                        });
                    }


                   
            var ctx = document.getElementById("divchart").getContext("2d");
            var chart = new Chart(ctx).Doughnut(DoughnutData, { labelAlign: 'center' });

                },
                error: function (result) {
                    console.log(result);
                }
            });
        }
        function getRandomColor() {
            var letters = '0123456789ABCDEF'.split('');
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
    </script>

</head>
<body>
    <h1>Doughnut Chart</h1>
    <canvas id="divchart" width="300px" height="300px"></canvas>
</body>
</html>


Controller :-


using System;

using System.Collections.Generic;

using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Chartsprojects.Controllers
{
    public class ChartjsDoughnutController : Controller
    {
        public ActionResult DoughnutChart()
        {

            return View();
        }


        public class Det
        {
            public int Id;

            public String Name;
            public decimal yVal;
        }

        public JsonResult DispRec()
        {

            SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrings["blogger"].ToString());
            List<Det> obj = new List<Det>();
            cn.Open();

            DataTable dt = new DataTable();

            SqlCommand cmd = new SqlCommand();
            SqlDataAdapter da = new SqlDataAdapter("select * from mDoughnutChartData", cn);
            da.Fill(dt);
            cn.Close();

            foreach (DataRow dr in dt.Rows)
            {
                Det def = new Det();

                def.Id = Convert.ToInt32(dr[0].ToString());
                def.Name = dr[1].ToString();
                def.yVal = Convert.ToDecimal(dr[2].ToString());
                obj.Add(def);
            }
            return Json(obj, JsonRequestBehavior.AllowGet);
        }
       }
}

Database Table:-



Chart:-



Comments

Post a Comment

Thank You for your Comment

Popular posts from this blog

Unable to perform operation on the item is locked in workspace

-
Image
Hi,  I am getting this issue last week. so I Fixed. I Will share the Solution. Some files struggle with another person's systems workspace. then you can't able to check-in in your TFS. The particular file was blocked or Locked in another person system so easily remove that person Workspace issue will be solved you can check-in your file into the TFS. tf workspace /delete /server:http://192.168.1.50:8080/tfs/projectname NCS-P01-001_2;R****h
Read more

Maximum Stored Procedure Function Trigger or View Nesting Level Exceeded (limit 32) in SQL Server

-
Image
                  In SQL Server I am facing some error on when it Runs Procedure. That as Maximum Stored Procedure Function Trigger or View Nesting Level Exceeded (limit 32) in SQL Server. Reason:                       user-defined function begins execution and decreases by one when the called stored procedure, managed code reference, or user-defined function completes execution. Attempting to exceed the maximum of 32 levels of nesting causes the whole calling chain to fail and for this error message to be raised.   Solution: To Run this code in Your SQL SERVER Avoid In this Error. SP_CONFIGURE 'nested_triggers' ,0 GO RECONFIGURE GO
Read more

Insecure cookie setting: missing Secure flag

-
  Issue Description: Insecure Cookie Setting - Missing Secure Flag Explanation: The "Secure" flag is an attribute that can be set for cookies in web applications. When the Secure flag is enabled for a cookie, the cookie is only transmitted over HTTPS connections, ensuring that it is sent securely over an encrypted channel. This is crucial for security because it helps prevent the exposure of sensitive information contained in cookies, such as session tokens or authentication credentials, to potential attackers. When the Secure flag is missing from a cookie, it means that the cookie can be sent over both secure (HTTPS) and non-secure (HTTP) connections. This can pose a significant security risk, as sensitive information could be exposed if the cookie is transmitted over an insecure connection. Impact: The impact of missing the Secure flag on a cookie depends on the context in which the cookie is used. Here are some potential risks: Session Hijacking: If an attacker can inter...
Read more