Usar Chart js en Asp.Net Core 5

En mas de alguna aplicación que desarrolles te pedirán que incluyas gráficos ya sea para comparar un conjunto de datos o facilitar la comprensión de estos mismos.  

Es por eso que este artículo aprenderemos a crear gráficos en nuestras aplicaciones mvc de net core usando la librería de javascript chartjs.

Lo primero que haremos será crear una aplicación Asp.net Core MVC

Para este ejemplo simulare un conjunto de datos que en una aplicación real podrían ser una consulta a una base de datos o el consumo de una api rest. Creamos dentro de la carpeta models una clase llamada ProductModel

    public class ProductModel
    {
        public string CodeProduct { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }

En HomeController crearemos una lista de Productos que serán los que nos servirán para representar nuestros datos en la vista.

    public class HomeController : Controller
    {
        private List<ProductModel> products;

        public HomeController()
        {
            products = new List<ProductModel>
            {
                new ProductModel { CodeProduct = "001", Name = "TV", Price = 100,},
                new ProductModel { CodeProduct = "002", Name = "LAPTOP", Price = 500,},
                new ProductModel { CodeProduct = "001", Name = "PHONE", Price = 300,},

            };
        }

        public IActionResult Index()
        {
            return View(products);
        }

        [HttpGet]
        public JsonResult GenerateChart()
        {

            return Json(products);
        }

    }

Como ya te lo dije anteriormente en el controlador creo  conjunto de datos manualmente que simulan la extracción de datos de una bd, de un archivo .csv, de una api rest, etc. 

Estos datos los retorno a la vista index para poder mostrarlos y para facilitar la creación del gráfico con estos datos creo un metodo que me  retorna los datos en formato json(los cuales estaremos recuperando desde la vista usando fetch)

En nuestra vista Index.cshtml tendremos el siguiente código.

@model IEnumerable<ChartApp.Models.ProductModel>
<div class="text-center">
    <h2 class="display-4">Chart .Net Core MVC</h2>
</div>
<div class="container">
    <table class="table">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.CodeProduct)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Name)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Price)
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.CodeProduct)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Price)
                    </td>
                </tr>
            }
        </tbody>
    </table>
    <button type="button" onclick="generateChart()" class="btn btn-primary">Generate Chart</button>
    <div  style="width:50%;height:50%; text-align:center">
        <canvas id="myChart"> </canvas>
    </div>
</div>
@section Scripts {
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        async function generateChart() {
            //canvas to draw the chart
            var myChart = document.getElementById('myChart').getContext('2d');

            //fetch data json
            try {
                let response = await fetch('/Home/GenerateChart');
                let products = await response.json();
                var labels = [];
                var datasets = []
                products.forEach(element => {
                    datasets.push(element.price)
                    labels.push(element.name)
                });
                //instance chart 
                new Chart(myChart, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [
                            {
                                label: "Products Price",
                                backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f"],
                                data: datasets
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'top',
                            },
                            title: {
                                display: true,
                                text: 'Chart.js .Net Core'
                            }
                        }
                    }
                });

            } catch (error) {
                console.log(error)
            }
        }

    </script>
}

Lo que hacemos en la vista es primeramente mostrar los datos en una tabla y al presionar un botón haciendo uso de la librería chartjs mostramos estos mismos datos pero en un gráfica de barras.

Este es un ejemplo sencillo para mostrarte cómo usar chartjs en asp.net core, tu puedes usar otro tipo de gráfico de los que chartjs te proporciona y configurar otro tipo opciones que esta librería te permite.

puedes descargar el código desde este repositorio

si quieren donarme para una café lo pueden hacer aqui.

Hasta la próxima.

Saludos desde El Salvador...