Gráficas con Laravel y Chartjs utilizando Laravel Mix

En esta entrada vamos a ver cómo generar gráficas con Laravel y Chartjs paso a paso, la idea, además de generar este tipo de gráficas, es ver cómo podemos sacarle partido a Laravel Mix para trabajar con ES6, pero no sólo eso, también aprenderemos a generar intervalos de fechas de forma correcta utilizando periodos y fechas Carbon con localización.

 Ahora que ya sabemos más o menos qué vamos a generar, ¡podemos comenzar!

Preparando Laravel para utilizar Laravel Mix

Lo primero que necesitas es utilizar el layout que Laravel ofrece por defecto al ejecutar el comando php artisan make:auth, así que no si no lo has hecho, hazlo ahora. No es un requisito pero queremos utilizar el archivo app.js y en ese layout ya viene todo preparado...

Ahora vamos a instalar las dependencias de JavaScript en nuestro proyecto utilizando el comando npm install para a continuación abrir el archivo webpack.mix.js y añadir la siguiente línea al final del mismo.

https://gist.github.com/iparrabb/7261d5abdf84275178a2e4a48058149d

Con esa instrucción le decimos a Laravel Mix que queremos que vaya a buscar el archivo public/js/chartjs/LineChart.js y que haga de ese código algo que los navegadores entiendan y finalmente ponga ese código en el archivo public/js/chartjs.line_chart.js.

Ya sabemos que Laravel Mix revisa todo lo que ocurre en nuestro archivo resources/js/app.js y lo pasa al directorio public/js, pero en este caso a mi me gusta más hacerlo así, siéntete libre de hacerlo como prefieras.

Para que nuestro código JavaScritp quede funcionando y compilando en cada cambio ejecuta en el terminal el comando npm run watch, con eso podemos seguir.

Generando una clase para representar la gráfica

Ahora vamos a crear el archivo public/js/chartjs/LineChart.js y añadimos el siguiente código.

Definir la lógica para retornar los datos con Laravel

Con ese método en un controlador tenemos suficiente para generar datos basados en periodos entre 2 fechas, aunque faltaría definir las sesiones from y to, eso no debe ser un problema a estas alturas.

Lo único que te quedaría sería definir un archivo blade.php con un código similar al siguiente:

Eso es todo, un canvas con el id correcto para que Chartjs sepa donde cargar la gráfica que acabamos de generar.