i've newly started using blazor to create a web app and was wondering how I would go around to connecting the info that i've saved into different Lists to work with ChartJS's. I'm not sure how to connect the two and was wondering if it was possible for someone to help/explain.
This is my stats.razor page, where I save the database info into different Lists:
@code { private List<string> employeeNames = new List<string>(); private List<int> employeeStats = new List<int>(); private List<Employee> employees = new(); protected override async Task OnInitializedAsync() { employees = await EmployeeService.GetEmployeesAsync(); if (employees.Any()) { employeeNames = employees.Select(e => e.Name).ToList(); employeeStats = employees.Select(e => e.Id).ToList(); } await InvokeAsync(() => GenerateChart()); } private void GenerateChart() { var chartData = new { labels = employeeNames, datasets = new[] { new { label = "Employee Performance", data = employeeStats, backgroundColor = "rgba(75, 192, 192, 0.2)", borderColor = "rgba(75, 192, 192, 1)", borderWidth = 1 } } }; JS.InvokeVoidAsync("createChart", "myChart1", "bar", chartData.labels, chartData.datasets[0].data, chartData.datasets[0].backgroundColor); }}And I would like to print them ont a chart using chartJS. This is my wwwroot js file:
function createChart(canvasId, chartType, labels, data, backgroundColor) { let ctx = document.getElementById(canvasId).getContext('2d'); return new Chart(ctx, { type: chartType, data: { labels: labels, datasets: [{ data: data, backgroundColor: backgroundColor, borderWidth: 1, borderColor: '#000' }] }, options: { responsive: true, scales: { yAxes: [{ ticks: { beginAtZero: true } }] }, maintainAspectRatio: false, legend: { display: false } } });}I've included the js file in my app.razor but it doesn't load the chart onto the page.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><base href="/" /><link rel="stylesheet" href="bootstrap/bootstrap.min.css" /><link rel="stylesheet" href="app.css" /><script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script> **<script src="stats.js"></script>** //<-here<link rel="stylesheet" href="SoulConnect.styles.css" /><link rel="icon" type="image/png" href="favicon.png" /><link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'><HeadOutlet /></head><body><Routes /><script src="_framework/blazor.web.js"></script></body></html>