Chartjs-Connect filter to multiple charts asp.net core mvc

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

result:
enter image description here

Leave a comment