0👍
✅
You can use ajax to get data from action,here is a demo:
Index view:
<canvas id="target"></canvas>
@section scripts{
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="~/js/Dash.js"></script>
}
Dash.js:
function GetData() {
var resp;
$.ajax({
type: "GET",
url: 'GetData',
async: false,
contentType: "application/json",
success: function (data) {
resp = data;
},
error: function (req, status, error) {
// do something with error
alert("error");
}
});
return resp;
}
var simpleData = GetData();
var ctx = document.getElementById("target").getContext('2d');
var myChart = new Chart(ctx, {
type: "doughnut",
data: {
labels: simpleData.labels,
datasets: [
{
data: simpleData.data,
label: "Target",
backgroundColor: simpleData.backgroundColor,
fill: false
}
]
},
});
actions:
public IActionResult Index()
{
ViewBag.ListC = _db.Colleges.Select(u => u.CollageName);
ViewBag.ListD = _db.Departments.Select(u => u.DepartmentName);
ViewBag.ListP = _db.UniPrograms.Select(u => u.ProgramName);
return View();
}
public IActionResult GetData()
{
return new JsonResult(new { Data = new List<int> { 300, 50, 100 }, Labels= new List<string>{"Red","Green","Blue"}, BackgroundColor = new List<string> { "rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)" } });
}
Source:stackexchange.com