Google Charts in ASP.Net MVC

Google Charts in ASP.Net MVC. The data used in charts are retrieved from database. The different chart types can be changed using chart options. Create a table named “Country Details” in the database. The script to create and insert data can be downloaded from the below link.

Download Script here

Model

Create a model with two variables as given below.

public class City
   {
       public string CityName { get; set; }
       public int TotalCities { get; set; }
   }

 Controller

public ActionResult Index()
       {
           return View();
       }

       [HttpPost]
       public JsonResult AjaxMethod()
       {
           string query = "SELECT City as CityName,COUNT(ID) TotalCities FROM CountryDetails WHERE Name = 'India' Group by City";
           string constr = ConfigurationManager.ConnectionStrings["ConStr"].ConnectionString;
           List<object> chartData = new List<object>();
           chartData.Add(new object[]
                       {
                           "CityName", "TotalCities"
                       });
           using (SqlConnection con = new SqlConnection(constr))
           {
               using (SqlCommand cmd = new SqlCommand(query))
               {
                   cmd.CommandType = CommandType.Text;
                   cmd.Connection = con;
                   con.Open();
                   using (SqlDataReader sdr = cmd.ExecuteReader())
                   {
                       while (sdr.Read())
                       {
                           chartData.Add(new object[]
                       {
                           sdr["CityName"], sdr["TotalCities"]
                       });
                       }
                   }

                   con.Close();
               }
           }

           return Json(chartData);
       }

View

Add below code in Ajax method view.

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <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() {
            $.ajax({
                type: "POST",
                url: "/Pie/AjaxMethod",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var data = google.visualization.arrayToDataTable(r);
 
                    //Pie chart
                    var options = {
                        title: 'Distribution of States in Tamilnadu'
                        //, is3D: true
                        //, pieHole: 0.5
                    };
                    var chart = new google.visualization.PieChart($("#chart")[0]);
                    chart.draw(data, options);
                },
                failure: function (r) {
                    alert(r.d);
                },
                error: function (r) {
                    alert(r.d);
                }
            });
        }
    </script>
    <div id="chart" style="width: 500px; height: 400px;">
    </div>
</body>
</html>

Different charts can be displayed using google visualization just by changing the options of chart in View of Ajax Method.

Pie Chart

var options = {
               title: 'Distribution of States in Tamilnadu'
              };

Pie Chart - Google charts

3D Pie Chart

var options = {
              title: 'Distribution of States in Tamilnadu',
              is3D: true
              };

3D Pie chart - Google Charts

Donut Chart

var options = {
               title: 'Distribution of States in Tamilnadu',
               pieHole: 0.5
              };

Donut Chart - Google Charts