I have successfully implemented a controller action in my MVC project that generates a JSON record with the required components. The challenge I am facing now is integrating this data into a pie chart using chart.js. The pie chart should display the counts of related countries based on the JSON data retrieved. Initially, I had set up the visualization using Google Visualization, but now I prefer to utilize chart.js which I recently started using. While creating charts with static data poses no problem, fetching data from a SQL table, converting it to JSON, and reading from it has proven to be more challenging.
I attempted to use a similar structure to access the data using data[], but that did not yield the desired results. I also tried referencing the data as getData, which is a variable for the AJAX function. However, I am still unable to retrieve the data successfully and it only appears after a page refresh.
Below is the controller action:
public ActionResult CustomersByCountry()
{
CustomerEntities _context = new CustomerEntities();
var customerByCountry = (from c in _context.Addresses
group c by c.Country into g
orderby g.Count() descending
select new
{
Country = g.Key,
CountCustomer = g.Count()
}).ToList();
return Json(new { result = customerByCountry }, JsonRequestBehavior.AllowGet);
}
And here is the JavaScript/AJAX code, nested within a document.ready function along with other charts:
EDIT - Revised AJAX code, but still not functioning as intended
OrdersByCountry()
function OrdersByCountry() {
$.ajax({
url: '/admin/CustomersByCountry',
method: "GET",
dataType: "json",
error: function (_, err) {
console.log(_, err)
},
success: function (data) {
console.log (data);
var customer = $("#customerByCountryPieChart").get(0).getContext("2d");
console.log(customer)
var cpieChart = new Chart(customer, {
type: 'pie',
data: data,
options: {
responsive: true,
title: {
display: true,
text: "Customers By Country",
}
}
});
}
});
};
EDIT - The updated code that is now functional:
I decided to fetch states instead of country to avoid any confusion. It made more sense to retrieve states rather than countries at this stage. Although the graph is now displaying correctly, I still need to refine the labels and other details.
OrdersByStates()
function OrdersByStates() {
$.ajax({
url: '@Url.Action("CustomersByStates", "Admin")',
data: JSON,
contentType: "application/json; charset=utf-8",
method: "get",
dataType: "json",
error: function (_, err) {
console.log(_, err)
},
success: function (response) {
console.log(response);
var jsonresult = response
var labels = jsonresult.result.map(function (e) {
return e.State;
});
var data = jsonresult.result.map(function (e) {
return e.CountCustomer;
});;
var ctx = document.getElementById("CustomerByStatePieChart").getContext("2d");
var cpieChart = new Chart(ctx, {
type: 'pie',
data:
{
datasets: [
{
backgroundColor: ["#46BFBD", "#F7464A"],
hoverBackgroundColor: ["#5AD3D1", "#FF5A5E"],
label: "Orders",
data: data,
}]
},
options: {
responsive: true,
title: {
display: true,
text: "Customers By Country",
}
}
});
}
});
};
});