asp.net MVC

Pie chart using jQuery google charts API with database in asp.net mvc?

Pie chart using jQuery google charts API with database in asp.net mvc?, someone asked me to explain?

In this article I will show you how to use jQuery google charts API and create Pie chart with database in asp.net MVC c# implemented using chart.js.

The jQuery ajax post call to a controller function GetData() and result the json response and bind the data in the chart using jQuery google charts API.

It consists of a dropdownlist with list of countries and chart. The chart will display the order statistics of each country on dropdownlist change.

Database:

Here I am using Northwind database. You can download it from following link.

Download Northwind Database

Open Microsoft sql management studio and right click on the database and attach it.

Step 1: Create an ado.net entity data model using table orders and generate entity for that.

Step 2: Right clicks on the "Controllers" folder and add "PieChart" controller. Copy and paste the following code.

public class PieChartController : Controller
    {
        //
        // GET: /PieChart/
        models db = new models();
        public ActionResult Index()
        {
            var Listcountry = (from c in db.Orders
                               select new { c.ShipCountry }).Distinct().ToList();
            Order order = new Order();
           order.ListCountry = new SelectList(Listcountry, "shipcountry", "shipcountry");
            return View(order);
        }
 
        public ActionResult GetChart(string country)
        {
            List<object>chartData = new List<object>();
           chartData.Add(new object[]{
                "ShipCity", "TotalOrders"
            });
 
            var result = (from order in db.Orders.AsEnumerable()
                          where order.ShipCountry==country
                          group order by order.ShipCity into rowGroup
                          select new
                          {
                              ShipCity =rowGroup.Key,
                              TotalOrders =rowGroup.Count()
 
                         }).Distinct().ToList();
 
            foreach (var c in result)
            {
               chartData.Add(new object[]
                   {
                       c.ShipCity, c.TotalOrders
                   });
            }
             return new JsonResult
            {
               Data = new
               {
                   success = chartData,
                   message = "Success",
               },
               JsonRequestBehavior = JsonRequestBehavior.AllowGet
            };
         }
      }

Step 3: Right click on the "Index" action method in the "PieChartController" and add "Index" view. Copy and paste the following code.

@model  MymvcApp.Models.Order
@{
   ViewBag.Title = "PieChart using jquery google charts in asp.net MVC";
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
   google.setOnLoadCallback(drawChart);

   
function drawChart() {
        var country = $("#ddlCountries").val();
        var dataobject = {};
       dataobject.country = country;
        var options = {
           title: country + 'City Distribution',
           is3D: true,
           pieHole: 0.5
        };
        $.ajax({
           type: "POST",
            url:"@Url.Action("GetChart", "PieChart", new { area = "" })",
           data: JSON.stringify(dataobject),
            //data: '{}',
           contentType: "application/json;charset=utf-8",
           dataType: "json",
           success: function (r) {
                debugger;
                var data =google.visualization.arrayToDataTable(r.success);
                var chart = new google.visualization.PieChart($("#chart")[0]);
               chart.draw(data, options);
            },
           failure: function (r) {
               alert(r.success);
            },
           error: function (r) {
               alert(r.success);
            }
        });
    }
 
    $(function () {
        $("[id*=ddlCountries]").bind("change", function () {
           drawChart();
        });
    }); 

</script>
<body style="border: 1px solid #DED8D8; width: 900px; height: 600px; font-family: Arial;">
    <h2>Pie Chart usingjquery google charts in asp.net MVC</h2>
    @Html.DropDownList("ddlCountries", Model.ListCountry)
    <br />
    <div id="chart" style="width: 900px; height: 500px;">
    </div>
</body>

 

Output:

Pie Chart using jquery google charts in asp.net MVC

Post your comments / questions