doughnut with image | C# Online Compiler

doughnut with image by kblau237

using System;
using System.ComponentModel.DataAnnotations;

Model

 
using System;
using System.ComponentModel.DataAnnotations;

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>chart doughnut</title>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <style>
        #myChart {
            margin: 0 auto;
            background: transparent url(http://i.imgur.com/gwlPu.jpg) no-repeat center;
            background-size: 50px 50px;
        }
    </style>
	</head>
	
	<body>
		<div Style="font-family: Corbel; font-size: small ;text-align:center " class="row">
        <div>
            <div style="width:300px;height:300px">
                <canvas id="myChart" style="padding: 0;margin: auto;display: block; "> </canvas>
            </div>
        </div>
    </div>
		<script>
						$.ajax({
							url: '@Url.RouteUrl(new{ action="GetAnswer", controller="Home"})',
							 type: "POST",
           
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (mems) {
                var aData = mems;
                var aLabels = aData[0];
                var aDatasets1 = aData[1];
                var dataT = {
                    labels: aLabels,
                    datasets: [{
                        label: "Test Data",
                        data: aDatasets1,
                        fill: false,
                        backgroundColor: ["rgba(54, 162, 235, 0.2)", "rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
                        borderColor: ["rgb(54, 162, 235)", "rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
                        borderWidth: 1
                    }]
                };
                var ctx = $("#myChart").get(0).getContext("2d");
                var myNewChart = new Chart(ctx, {
                    type: 'doughnut',
                    data: dataT,
                    options: {
                        responsive: true,
                        title: { display: true, text: 'CHART.JS DEMO CHART' },
                        legend: { position: 'bottom' },
                        scales: {
                            xAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' } }],
                            yAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' }, ticks: { stepSize: 50, beginAtZero: true } }]
                        },
                    }
                });
            }
			
			});

		</script>
	</body>
</html>

View

​x
 
<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->
​
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>chart doughnut</title>
​
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <style>
        #myChart {
            margin: 0 auto;
            background: transparent url(http://i.imgur.com/gwlPu.jpg) no-repeat center;
            background-size: 50px 50px;
        }
    </style>
    </head>
    
    <body>
        <div Style="font-family: Corbel; font-size: small ;text-align:center " class="row">
        <div>
            <div style="width:300px;height:300px">
                <canvas id="myChart" style="padding: 0;margin: auto;display: block; "> </canvas>
            </div>
        </div>
    </div>
        <script>
                        $.ajax({
                            url: '@Url.RouteUrl(new{ action="GetAnswer", controller="Home"})',
                             type: "POST",
           
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (mems) {
                var aData = mems;
                var aLabels = aData[0];
                var aDatasets1 = aData[1];
                var dataT = {
                    labels: aLabels,
                    datasets: [{
                        label: "Test Data",
                        data: aDatasets1,
                        fill: false,
                        backgroundColor: ["rgba(54, 162, 235, 0.2)", "rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
                        borderColor: ["rgb(54, 162, 235)", "rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
                        borderWidth: 1
                    }]
                };
                var ctx = $("#myChart").get(0).getContext("2d");
                var myNewChart = new Chart(ctx, {
                    type: 'doughnut',
                    data: dataT,
                    options: {
                        responsive: true,
                        title: { display: true, text: 'CHART.JS DEMO CHART' },
                        legend: { position: 'bottom' },
                        scales: {
                            xAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' } }],
                            yAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' }, ticks: { stepSize: 50, beginAtZero: true } }]
                        },
                    }
                });
            }
            
            });
​
        </script>
    </body>
</html>
​

using System;
using System.Web.Mvc;
using System.Collections.Generic;
using System.Data;
using System.Linq;

namespace HelloWorldMvcApp
{
	public class HomeController : Controller
	{
		[HttpGet]
		public ActionResult Index()
		{
			return View();
		}


		[HttpPost]
		public JsonResult GetAnswer(string question)
		{				
			
			List<object> iData = new List<object>();
            //Creating sample data
            DataTable dt = new DataTable() ;
            dt.Columns.Add("Employee",System.Type.GetType("System.String"));
            dt.Columns.Add("Credit",System.Type.GetType("System.Int32"));

            DataRow dr = dt.NewRow();
            dr["Employee"] = "Sam";
            dr["Credit"] = 123;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["Employee"] = "Alex";
            dr["Credit"] = 456;
            dt.Rows.Add(dr);

            dr = dt.NewRow();
            dr["Employee"] = "Michael";
            dr["Credit"] = 587;
            dt.Rows.Add(dr);

            //Looping and extracting each DataColumn to List<Object>
            foreach (DataColumn dc in dt.Columns)
            {
                List<object> x = new List<object>();
                x = (from DataRow drr in dt.Rows select drr[dc.ColumnName]).ToList();
                iData.Add(x);
            }
            //Source data returned as JSON
            return Json(iData, JsonRequestBehavior.AllowGet);
		}

		
	}
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
using System.Data;
using System.Linq;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }
​
​
        [HttpPost]
        public JsonResult GetAnswer(string question)
        {               
            
            List<object> iData = new List<object>();
            //Creating sample data
            DataTable dt = new DataTable() ;
            dt.Columns.Add("Employee",System.Type.GetType("System.String"));
            dt.Columns.Add("Credit",System.Type.GetType("System.Int32"));
​
            DataRow dr = dt.NewRow();
            dr["Employee"] = "Sam";
            dr["Credit"] = 123;
            dt.Rows.Add(dr);
​
            dr = dt.NewRow();
            dr["Employee"] = "Alex";
            dr["Credit"] = 456;
            dt.Rows.Add(dr);
​
            dr = dt.NewRow();
            dr["Employee"] = "Michael";
            dr["Credit"] = 587;
            dt.Rows.Add(dr);
​
            //Looping and extracting each DataColumn to List<Object>
            foreach (DataColumn dc in dt.Columns)
            {
                List<object> x = new List<object>();
                x = (from DataRow drr in dt.Rows select drr[dc.ColumnName]).ToList();
                iData.Add(x);
            }
            //Source data returned as JSON
            return Json(iData, JsonRequestBehavior.AllowGet);
        }
​
        
    }
}

View in Full Screen

View IL Code