Hi rani,
Using the below article i have created the example.
Here i am using Entity Framework to fetch the record from database.
For more details on Entity Framework configuration in ASP.Net Core refer below article.
Check this example. Now please take its reference and correct your code.
Model
public class Order
{
public int OrderId { get; set; }
public string ShipCity { get; set; }
public string ShipCountry { get; set; }
}
Namespaces
using System;
using System.Text;
Controller
public class HomeController : Controller
{
private DBCtx Context { get; }
public HomeController(DBCtx _context)
{
this.Context = _context;
}
public IActionResult Index()
{
return View();
}
public ContentResult AjaxMethod([FromBody]Country country)
{
var orders = this.Context.Orders
.Where(x => x.ShipCountry == country.Name)
.GroupBy(x => x.ShipCity)
.Select(g => new
{
City = g.Key,
Count = g.Count()
});
StringBuilder sb = new StringBuilder();
sb.Append("[");
foreach (var order in orders)
{
sb.Append("{");
System.Threading.Thread.Sleep(50);
string color = String.Format("#{0:X6}", new Random().Next(0x1000000));
sb.Append(string.Format("text :'{0}', value:{1}, color: '{2}'", order.City, order.Count, color));
sb.Append("},");
}
sb = sb.Remove(sb.Length - 1, 1);
sb.Append("]");
return Content(sb.ToString());
}
}
public class Country
{
public string Name { get; set; }
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/excanvas/r3/excanvas.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/chart.js/0.2/Chart.js"></script>
<script type="text/javascript">
$(function () {
LoadChart();
$("#ddlCountries").on("change", function () {
LoadChart();
});
$("#rblChartType input").on("click", function () {
LoadChart();
});
function LoadChart() {
var chartType = parseInt($("#rblChartType input:checked").val());
var obj = {};
obj.Name = $("#ddlCountries").val();
$.ajax({
type: "POST",
url: "/Home/AjaxMethod",
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "text",
success: function (response) {
$("#dvChart").html("");
$("#dvLegend").html("");
var data = eval(response);
var el = document.createElement('canvas');
$("#dvChart")[0].appendChild(el);
if ($.browser.msie && $.browser.version == "8.0") {
G_vmlCanvasManager.initElement(el);
}
var ctx = el.getContext('2d');
switch (chartType) {
case 1:
new Chart(ctx).Pie(data);
break;
case 2:
new Chart(ctx).Doughnut(data);
break;
}
for (var i = 0; i < data.length; i++) {
var div = $("<div />");
div.css("margin-bottom", "10px");
div.html("<span style = 'display:inline-block;height:10px;width:10px;background-color:"
+ data[i].color + "'></span> " + data[i].text);
$("#dvLegend").append(div);
}
},
failure: function (response) {
alert('There was an error.');
}
});
}
});
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
Country:
<select id="ddlCountries">
<option value="USA">USA</option>
<option value="Germany">Germany</option>
<option value="France">France</option>
<option value="Brazil">Brazil</option>
</select>
<table id="rblChartType" border="0">
<tr>
<td><input type="radio" name="ChartType" value="1" checked="checked" />Pie</td>
<td><input type="radio" name="ChartType" value="2" />Doughnut</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div id="dvChart">
</div>
</td>
<td>
<div id="dvLegend">
</div>
</td>
</tr>
</table>
</body>
</html>
Screenshot
