Failed to load resource: the server responded with a status of 500 () while using google charts in asp.net core
Question
I'm trying to bind the query to google charts but I face a problem as shown below. I'm new to asp.net core so when I try to use google charts I face this problem and below are my codes any help please or any other free charts you advise me to use
Hello everyone, I'm trying to bind the query to google charts but I face the problem as shown below. I'm new to asp.net core so when I try to use google charts I face this problem and below are my codes any help please or any other free charts you advise me to use
public JsonResult AjaxMethod(IConfiguration config)
{
string query = "select [UserId], count([ServiceOrderNumber]) as ServiceOrders from [dbo].[ServiceOrders] group by [UserId] order by count ([ServiceOrderNumber]) desc";
string constr = this.configuration.GetConnectionString("DefaultConnection");
List<object> chartData = new List<object>();
chartData.Add(new object[]
{
"[UserId]", "[ServiceOrders]"
});
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["[UserId]"], sdr["[ServiceOrders]"]
});
}
}
con.Close();
}
}
return Json(chartData);
}
and this is my view
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<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://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
type: "POST",
url: "/Reports/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($("#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>
1 answers
solution1
1 2021-03-09 07:59:39
public JsonResult AjaxMethod(IConfiguration config)
The 500 error relates the AjaxMethtod parameter: IConfiguration config . From your code, it seems that you want to get the connection string via the IConfiguration, in this scenario, you could use constructor injection to resolve an IConfiguration, instead of transferring it as the parameter. So, try to remove it from the AjaxMethod.
The sample code as below:
public class ReportsController : Controller
{
private readonly ApplicationDbContext _context;
//Required using Microsoft.Extensions.Configuration;
private readonly IConfiguration _configuration;
public ReportsController(ApplicationDbContext context, IConfiguration configuration)
{
_context = context;
_configuration = configuration;
}
public IActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult AjaxMethod()
{
var conectionstring = this._configuration.GetConnectionString("DefaultConnection");
List<object> chartData = new List<object>();
chartData.Add(new object[]
{
"[UserId]", "[ServiceOrders]"
});
//based on the connection string to query database and get data.
for (int i = 1; i < 10; i++)
{
chartData.Add(new object[]
{
new Guid(), i
});
}
return Json(chartData);
}
}
Code in the Index View page:
<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://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
type: "POST",
url: "/Reports/AjaxMethod",
//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($("#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>
Then, debugging the web application, the screenshot as below:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.