using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
namespace Google_Charts_MVC.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult AjaxMethod()
{
string query = " Select ProductTitle, count(ProductID) TotalOrders";
query += " from tblProducts Group By ProductTitle";
string constr = ConfigurationManager.ConnectionStrings["Constring"].ConnectionString;
List<object> chartData = new List<object>();
chartData.Add(new object[]
{
"ProductTitle", "TotalOrders"
});
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["ProductTitle"].ToString(), sdr["TotalOrders"]
});
}
}
con.Close();
}
}
return Json(chartData);
}
}
}
@{
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: "/Home/AjaxMethod",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r);
//Pie
var options = {
title: 'USA City Distribution'
};
var chart = new google.visualization.PieChart($("#chart1")[0]);
chart.draw(data, options);
//3D Pie
options = {
title: 'USA City Distribution',
is3D: true
};
chart = new google.visualization.PieChart($("#chart2")[0]);
chart.draw(data, options);
//Doughnut
options = {
title: 'USA City Distribution',
pieHole: 0.5
};
chart = new google.visualization.PieChart($("#chart3")[0]);
chart.draw(data, options);
//.ComboChart
options = {
title: 'USA City Distribution',
is3D: true
};
chart = new google.visualization.ComboChart($("#chart4")[0]);
chart.draw(data, options);
//.ColumnChart
options = {
title: 'USA City Distribution',
is3D: true
};
chart = new google.visualization.ColumnChart($("#chart5")[0]);
chart.draw(data, options);
//Table
options = {
title: 'USA City Distribution',
is3D: true
};
chart = new google.visualization.LineChart($("#chart6")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
<div id="chart1" style="width: 500px; height: 400px;">
</div>
<div id="chart2" style="width: 500px; height: 400px;">
</div>
<div id="chart3" style="width: 500px; height: 400px;">
</div>
<div id="chart4" style="width: 500px; height: 400px;">
</div>
<div id="chart5" style="width: 500px; height: 400px;">
</div>
<div id="chart6" style="width: 500px; height: 400px;">
</div>
</body>
</html>
i am doing this as reference.
https://www.aspsnippets.com/Articles/Google-Charts-in-ASPNet-MVC-Google-Pie-Doughnut-Chart-example-with-database-in-ASPNet-MVC.aspx
