Download Project  (Full Project)

Step 1:

In this tutorial we make chat report  in ASP.Net MVC. This data come from database dynamically and Display in chart. First create ASP.Net Web Application project then select MVC then click ok. Then include ADO.NET Entity Data Model to get the data from database.  Include the two js file in your project. Js files name given below:

1. exporting.js
2. highcharts.js

Also you can use CDN in your project. Then first time run this project. Go to Views Folder ->Home Folder ->open index.cshtml. Given Bellow source index code:

@{
    ViewBag.Title = "Home Page";
}
<script src="~/Scripts/chart/exporting.js"></script>
<script src="~/Scripts/chart/highcharts.js"></script>


<div class="jumbotron">
    <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</div>

<script>


    $(document).ready(function () {
        $.getJSON("/Home/GetData", function (data) {
           


            Highcharts.chart('container', {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                title: {
                    text: 'Gender Ratio'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                },
                series: [{
                    name: 'Brands',
                    colorByPoint: true,
                    data: [{
                        name: 'Male',
                        y: data.Male
                    }, {
                        name: 'Female',
                        y: data.Female
                    }, {
                        name: 'Other',
                        y: data.Other
                    }]
                }]
            });
        });
    });

    
</script>

Step 2:

GetData method responsible to get the data from the database and pass the view by convert json format using JavaScript.  Given Bellow HomeController source Code:

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

namespace HighChart.Controllers
{
    public class HomeController : Controller
    {
        TestDBEntities context = new TestDBEntities();
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetData()
        {
            int male = context.HighCharts.Where(x => x.Gender == "Male").Count();
            int female = context.HighCharts.Where(x => x.Gender == "Female").Count();
            int other = context.HighCharts.Where(x => x.Gender == "Other").Count();
            Ratio obj = new Ratio();
            obj.Male = male;
            obj.Female = female;
            obj.Other = other;

            return Json(obj,JsonRequestBehavior.AllowGet);
        }
        public class Ratio
        {
            public int Male { get; set; }
            public int Female { get; set; }
            public int Other { get; set; }
        }
    }
}

Step 3:

Now build and run the project.