I have tried a couple of things to display data in graphs using js library, but no success.
What I am looking for is to show WeekStart Date on X axis, and a Bar, at the top of the bar show the Total Chats taken for that week.
Below is the code I wrote till now, but failed to show the results.
Help is very much appreciated.
- Action Method
public ActionResult Dashboard()
{
var mostRecentMonday = DateTime.Now.AddDays(-7).StartOfWeek(DayOfWeek.Monday);
var weekEnd = mostRecentMonday.AddDays(7).AddSeconds(-1); //will return the end of the day on Sunday
ViewBag.Monday = mostRecentMonday;
ViewBag.lastWeekSunday = weekEnd;
try
{
ViewBag.DataPoints = JsonConvert.SerializeObject(_db.Chats.Where(x => System.Data.Entity.DbFunctions.TruncateTime(x.MSTChatCreatedDateTime) >= mostRecentMonday
&& System.Data.Entity.DbFunctions.TruncateTime(x.MSTChatCreatedDateTime) <= weekEnd).GroupBy(a => System.Data.Entity.DbFunctions.TruncateTime(a.MSTChatCreatedDateTime)).Select(b => new ReportVM()
{
CreatdDate = b.Key,
ChatCountCreatdDate = b.Count()
}).ToList(), _jsonSetting);
return View();
}
catch (System.Data.Entity.Core.EntityException)
{
return View("Error");
}
catch (System.Data.SqlClient.SqlException)
{
return View("Error");
}
}
JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore };
- Dashboard View
<head>
<script src="~/Content/vendor/chart.js/Chart.min.js"></script>
</head>
<body>
<div id="chartContainer"></div>
<script type="text/javascript">
var dataPoints =[];
for (var i in ViewBag.DataPoints){
dataPoints.push({label:result[i].x, y:result[i].y});
}
window.onload = function() {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
zoomEnabled: true,
animationEnabled: true,
title: {
text: "Line Chart with Data-Points from DataBase"
},
data: [
{
type: "barcode",
dataPoints: dataPoints,
}
]
});
chart.render();
};
</script>
</body>
Thank you in advance.
question from:https://stackoverflow.com/questions/66065564/graphs-chart-in-asp-net-mvc-using-js-library
