I am working on an ASP.NET MVC application that includes a line chart displaying record counts and months on the X-axis and Y-axis respectively.
To achieve this, I need to make an ajax call to the controller where the model holds information such as the record creation date and the value.
However, I am struggling with grouping the data by month to display it in the format like "April has 15 records" and "May has 12 records," and so on.
Below is the structure of my model:
public class CustomerFeedBack {
[Key]
public int Id {
get;
set;
}
public DateTime CreatedDate {
get;
set;
} = DateTime.Now;
public int TotalSatisfaction {
get;
set;
}
}
The javascript code for the chart currently contains dummy data. I aim to return the actual record counts for labels representing months:
var bouData = {
// Generate the days labels on the X axis.
labels: Array.from(new Array(30), function (_, i) {
return i === 0 ? 1 : i;
}),
datasets: [{
label: 'Satisfied',
fill: 'start',
data: [1500, 800, 320, 180, 240, 320, 230, 650, 590, 1200, 750, 940, 1420, 1200, 960, 1450, 1820, 2800, 2102, 1920, 3920, 3202, 3140, 2800, 3200, 3200, 3400, 2910, 3100, 4250],
backgroundColor: 'rgba(0,123,255,0.1)',
borderColor: 'rgba(0,123,255,1)',
pointBackgroundColor: '#ffffff',
pointHoverBackgroundColor: 'rgb(0,123,255)',
borderWidth: 1.5,
pointRadius: 0,
pointHoverRadius: 3
},
In the controller, I intend to return JsonResult binding the labels (month) and data (count). Below is the snippet from my incomplete controller code:
var satisfied = (from a in db.tbl_Main where a.TotalSatisfaction >= 12
select new {
// Here I want to group by create date based on Month and sum up the values.
}).ToList();
I'm still learning and welcome any suggestions on how to complete this task efficiently or if there are easier alternatives.
Thank you for your help.
Update on May 19, 2022:
I have implemented the code within the JsonResult:
var satisfied = db.tbl_Main.Where(m => m.TotalSatisfaction >= 12).GroupBy(
m => new { m.CreatedDate.Year, m.CreatedDate.Month },
m => m.TotalSatisfaction
).ToList();
The result shows that there are 4 records for the Month 05.
After printing the results in the console, I am now looking to display these month-wise counts on the line chart. Would returning the data in the format Month count be suitable for this purpose?
Beneath is the script where I plan to include the returned values in the chart labels for months and counts:
var bouData = {
// Generate the days labels on the X axis.
labels: Array.from(new Array(30), function (_, i) {
return i === 0 ? 1 : i;
}),
datasets: [{
label: 'Satisfied',
fill: 'start',
data: [1500, 800, 320, 180, 240, 320, 230, 650, 590, 1200, 750, 940, 1420, 1200, 960, 1450, 1820, 2800, 2102, 1920, 3920, 3202, 3140, 2800, 3200, 3200, 3400, 2910, 3100, 4250],
backgroundColor: 'rgba(0,123,255,0.1)',
borderColor: 'rgba(0,123,255,1)',
pointBackgroundColor: '#ffffff',
pointHoverBackgroundColor: 'rgb(0,123,255)',
borderWidth: 1.5,
pointRadius: 0,
pointHoverRadius: 3
},