I would like to control 3 charts with one filter, the page will contain a filter floating to the right and three charts at the left, the charts are in a javascript file called dash.js, the charts were made using chart.js. the charts code in the javascript file with hardcoded data
var ctx = document.getElementById("target").getContext('2d');
var myChart = new Chart(ctx, {
type: "doughnut",
data: {
labels: KPINAME,
datasets: [
{
data: kpis,
label: "Target",
backgroundColor: barColors,
fill: false
}
]
},
options: {
maintainAspectRatio: false,
}
});
//external
var ctx = document.getElementById("external");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: programs,
datasets: [
{
data: kpi2,
label: "KPI2",
backgroundColor: "#3e95cd",
fill: false
}
]
}
});
//internal
var ctx = document.getElementById("internal");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: years,
datasets: [
{
data: kpi2forcsc,
label: "KPI2 OF CSC",
borderColor: "#3e95cd",
fill: false
},
{
data: kpi2forit,
label: "KPI2 OF IT",
borderColor: "#b91d47",
fill: false
}
]
}
the filter code on the index page
<div style="float:right">
<div class=" navbar-light bg-light text-center" id="sticky-sidebar">
<div class="sticky-top">
<!-- Fillter code-->
<!-- just a sample .. later connect with database using C# -->
<div class="college">
<label class="small">:choose college</label>
<select id="College" name="College" class="form-control form-control-sm">
<option value="" disabled selected>college</option>
@foreach (var x in ViewBag.ListC)
{
<option value="@x">@x</option>
}
</select>
</div>
<!-- connect with database using C# -->
<div class="department">
<label class="small">:choose department</label>
<select id="department" name="department" class="form-control form-control-sm">
<option value="" disabled selected>department</option>
@foreach (var x in ViewBag.ListD)
{
<option value="@x">@x</option>
}
</select>
</div>
<!-- connect with database using C# -->
<div class="program">
<label class="small">:choose a program</label>
<select id="department" name="department" class="form-control form-control-sm">
<option value="" disabled selected>program</option>
@foreach (var x in ViewBag.ListP)
{
<option value="@x">@x</option>
}
</select>
</div>
the code in the home controller
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();
}
I want to know how to link the filter with the charts, so any change in the filter will affect the charts
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)" } });
}