Hi,
I have an asp.net core MVC application. In one of my views (PieChart.cshtml), I am retrieving data from the database and use chart.js pie charts to show these data.
Here is my PieChart.cshtml
@{
ViewData["Title"] = "PieChart";
}<h2 class="text-center font-weight-bolder">Reconciliation Status</h2><!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><title>Reconciliation Status</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script></head><body><div class="container"><div class="row"><div class="col"><input type="text" id="datepickerStart" placeholder="Start Date" class="form-control"></div><div class="col"><input type="text" id="datepickerEnd" placeholder="End Date" class="form-control"></div><div class="col"><select class="custom-select" id="game"><option selected value="All">All</option><option value="1570">1570</option><option value="1571">1571</option><option value="1574">1574</option></select></div><div class="col"><input id="btn_pie_chart" type="submit" value="Show" class="btn btn-success"/></div></div></div><div class="container"><div class="row py-2"><div class="col-lg-6 py-1"><div class="card border-primary "><div class="card-body "><canvas id="pie-chart" width="350" height="350"></canvas></div></div></div><div class="col-lg-6 py-1"><div class="card border-primary "><div class="card-body "><canvas id="pie-chart1" width="350" height="350"></canvas></div></div></div></div></div><script>
var PieChartData =
{
labels: @Html.Raw(ViewBag.Status_List),
datasets: [
{
label: 'Razer/Zula Database',
backgroundColor: ["#f9f990","#90f997","#9790f9","#99e5e5","#f7bd83"
],
borderWidth: 2,
data: [@ViewBag.Count_List]
}
]
};
var PieChartData1 =
{
labels: @Html.Raw(ViewBag.Status_ListRazer),
datasets: [
{
label: 'Our Database',
backgroundColor: [
"#f9f990","#90f997","#9790f9","#99e5e5","#f7bd83"
],
borderWidth: 2,
data: [@ViewBag.Count_ListRazer]
}
]
};
var ctx1 = document.getElementById("pie-chart1").getContext("2d");
window.myBar = new Chart(ctx1,
{
type: 'pie',
data: PieChartData1,
options:
{
legend: { position: 'bottom', padding: 5, labels: { pointStyle: 'circle', usePointStyle: true } },
title:
{
display: true,
text: "Razer/Zula Database"
},
responsive: true,
maintainAspectRatio: false,
animation: {
easing: 'easeInOutQuart',
duration: 2000
}
}
});
var ctx = document.getElementById("pie-chart").getContext("2d");
window.myBar = new Chart(ctx,
{
type: 'pie',
data: PieChartData,
options:
{
legend: { position: 'bottom', padding: 5, labels: { pointStyle: 'circle', usePointStyle: true } },
title:
{
display: true,
text: "Our Database"
},
responsive: true,
maintainAspectRatio: false,
animation: {
easing: 'easeInBounce',
duration: 2000
}
}
});
$(function() {$("#datepickerStart").datepicker({ dateFormat: "dd/mm/yy" }).datepicker("setDate", new Date());$("#datepickerEnd").datepicker({ dateFormat: "dd/mm/yy" }).datepicker("setDate", new Date());$("#btn_pie_chart").on('click',
function() {
var from = $("#datepickerStart").val();
var to = $("#datepickerEnd").val();
var game = $("#game option:selected").text();
alert('Selected' + from + ':' + to + ':' + game);
var serviceURL = '/GameBanks/PieChartDraw?sDate=' + from +'&eDate=' +to +'&gameCode=' +game;
var jsonData = JSON.stringify({
sDate: from,
eDate: to,
gameCode: game
});
$.ajax({
type: "GET",
url: serviceURL,
contentType: "application/json; charset=utf-8",
dataType: "json",
error: OnErrorCall_
});
function OnErrorCall_() {
alert("Error!");
}
});
});
</script></body></html>Here is my controller action:
[HttpGet]
[Authorize]
public IActionResult PieChart()
{
try
{
ViewData.Clear();
var startDate = DateTime.Today;
var endDate = DateTime.Today.AddDays(1);
//Our Database
var result = _context.GameBanks
.Where(m => m.RequestDateTime >= startDate && m.RequestDateTime < endDate)
.GroupBy(p => p.Status)
.Select(g => new
{
Count = g.Count(),
Status = g.Key
}).ToList();
var resultList = string.Empty;
var nameList = new List<string>();
foreach (var element in result)
{
resultList = resultList + element.Count + ",";
switch (Convert.ToInt32(element.Status))
{
case 0:
nameList.Add("UNCERTAIN");
break;
case 1:
nameList.Add("CONFIRM");
break;
case 2:
nameList.Add("CANCEL");
break;
}
}
ViewBag.Count_List = resultList.TrimEnd(',').Trim();
ViewBag.Status_List =
Newtonsoft.Json.JsonConvert.SerializeObject(nameList);
//RAZER Database
var resultRazer = _context.GameConfirmResponses
.Where(m => m.requestDateTime >= startDate && m.requestDateTime < endDate)
.GroupBy(p => p.status)
.Select(g => new
{
Count = g.Count(),
Status = g.Key
}).ToList();
var resultListRazer = string.Empty;
var nameListRazer = new List<string>();
foreach (var element in resultRazer)
{
resultListRazer = resultListRazer + element.Count + ",";
switch (Convert.ToInt32(element.Status))
{
case 0:
nameListRazer.Add("UNCERTAIN");
break;
case 1:
nameListRazer.Add("CONFIRM");
break;
case 2:
nameListRazer.Add("CANCEL");
break;
}
}
ViewBag.Count_ListRazer = resultListRazer.TrimEnd(',').Trim();
ViewBag.Status_ListRazer =
Newtonsoft.Json.JsonConvert.SerializeObject(nameListRazer);
return View();
}
catch (Exception)
{
throw;
}
}On the PieChart view, there are a start date, end date, and game code. When the user selects dates and submits, the ajax call another method (pretty much same logic) and queries database according to the values which are selected by the user. I am setting those values into ViewBag but charts are not updated. Is there a way to update the charts based on mine logic?
PieChartDraw:
[HttpGet]
public void PieChartDraw(string sDate, string eDate, string gameCode)
{
ViewData.Clear();
var startDate = DateTime.Parse(sDate);
var endDate = DateTime.Parse(eDate);
//Our Database
var result = _context.GameBanks
.Where(m => m.RequestDateTime >= startDate && m.RequestDateTime < endDate)
.GroupBy(p => p.Status)
.Select(g => new
{
Count = g.Count(),
Status = g.Key
}).ToList();
var resultList = string.Empty;
var nameList = new List<string>();
foreach (var element in result)
{
resultList = resultList + element.Count + ",";
switch (Convert.ToInt32(element.Status))
{
case 0:
nameList.Add("UNCERTAIN");
break;
case 1:
nameList.Add("CONFIRM");
break;
case 2:
nameList.Add("CANCEL");
break;
}
}
ViewBag.Count_List = resultList.TrimEnd(',').Trim();
ViewBag.Status_List =
Newtonsoft.Json.JsonConvert.SerializeObject(nameList);
//RAZER Database
var resultRazer = _context.GameConfirmResponses
.Where(m => m.requestDateTime >= startDate && m.requestDateTime < endDate)
.GroupBy(p => p.status)
.Select(g => new
{
Count = g.Count(),
Status = g.Key
}).ToList();
var resultListRazer = string.Empty;
var nameListRazer = new List<string>();
foreach (var element in resultRazer)
{
resultListRazer = resultListRazer + element.Count + ",";
switch (Convert.ToInt32(element.Status))
{
case 0:
nameListRazer.Add("UNCERTAIN");
break;
case 1:
nameListRazer.Add("CONFIRM");
break;
case 2:
nameListRazer.Add("CANCEL");
break;
}
}
ViewBag.Count_ListRazer = resultListRazer.TrimEnd(',').Trim();
ViewBag.Status_ListRazer =
Newtonsoft.Json.JsonConvert.SerializeObject(nameListRazer);
}
}