How To Add Apex Donut Chart In Asp.Net MVC Using JavaScript/Jquery

In this blog, I am explaining how implementing/add Apex donut Chart in asp .net MVC using JavaScript/Jquery.

we are taking a very basic chart to demonstrate. we will get data using ajax call for implementing a chart.

first, we need to create an ASP.NET MVC Web application. follow below steps for creating it.

give whatever name you want to give to your application

it will create new ASP.NET MVC Web application. now we just need to add apex charts javascript and CSS file into our application(apexcharts.css, apexcharts.min.js).

after adding it, just give its references to our web page.

now, go to HomeController and add the following GetChartData method into it.

[HttpPost]
public JsonResult GetChartData()
{
    try
    {
        decimal[] SeriesVal = { 50.55M, 55, 41, 17 };
        string[] LabelsVal = { "India", "USA", "UK", "Canada" };

        return Json(new { success = true, series = SeriesVal, labels = LabelsVal, message = "success.!" }, JsonRequestBehavior.AllowGet);
    }
    catch (Exception ex)
    {
        return Json(new { success = false, message = "Some thing went Wrong.! unsuccessfull!" }, JsonRequestBehavior.AllowGet);
    }
}

GetChartData method will be called from ajax call.it will return data in JSON format. you can write database and other business logic code here. I used static variables for demonstration.

now goto Index.cshtml, and add the following code into it.

@{
    ViewBag.Title = "Home Page";
}
<link href="~/Content/apex/apexcharts.css" rel="stylesheet" />

<div class="jumbotron">
    <h1>apex chart</h1>

    <div id="donut-chart" class=""></div>

</div>


@section scripts{

    <script src="~/Content/apex/apexcharts.min.js"></script>
    <script>

        var donutChart;
        var donut;

        $(document).ready(function () {

            GetData();

        });

        function GetData() {
            $.ajax({
                url: '/Home/GetChartData/',
                cache: false,
                type: "POST",
                success: function (data) {
                    //console.log(data);
                    if (data.success) {

                        if (data.series.length > 0) {

                            LoadChart(data.series, data.labels);
                        } else {

                        }


                    } else {
                        alert(data.message);
                    }
                },
                error: function (reponse) {
                    console.log(reponse);
                    alert("error : " + reponse);
                }
            });
        }


        function LoadChart(series, labels) {

            // Donut Chart

            donutChart = {
                chart: {
                    height: 350,
                    type: 'donut',
                    toolbar: {
                        show: false,
                    }
                },
                series: series,
                labels: labels,
                responsive: [{
                    breakpoint: 480,
                    options: {
                        chart: {
                            width: 305
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            }

            donut = new ApexCharts(
                document.querySelector("#donut-chart"),
                donutChart
            );

            donut.render();

        }


    </script>
}

I created one DIV with id as donut-chart. in the script we need to define two global variables as donutChart, donut. in donutChart variable, we assign values/properties details about the chart. in the donut variable, we render the apex chart.

in document ready function, we call GetData() function. it will do ajax call, after returning data it will call LoadChart() function.

LoadChart() function will set properties into a donutChart variable and render the apex chart.it will create a chart in donut-chart DIV.

this is basic way of implementing an apex donut chart using JavaScript/Jquery.

above code will give you following output.