connect filter to multiple charts asp.net core mvc

Question

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

Answer 1

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)" } });
        }

result: