Una de las principales novedades de Symfony 6, es una mayor integración con librerías JavaScript (JS). El paquete Chart.js que sirve para construir gráficos en JS puede usarse integrado a cualquier proyecto desarrollado con Symfony 6. Unos de los principales desafíos, es configurar desde Symfony los gráficos de Chart.js.

A continuación, desarrollo un ejemplo donde podemos en los gráficos:

1. Elegir el formato del gráfico.
2. Cambiar el color de fondo del gráfico.
3. Cambiar los colores del gráfico.
4. Cambiar el tamaño.
5. Cambiar el tamaño de las leyendas en los ejes.
6. Cambiar el tamaño de la leyenda principal.

El punto de partida

Trabajaré con las siguientes herramientas que Usted deberá tener instalada para obtener el mismo resultado que yo desarrollo en este ejemplo:

1. Windows 10
2. Scoop (ver instrucciones en el sitio de symfony.com)
3. Symfony CLI (desde el sitio oficial del symfony.com)
4. Symfony 6.3
5. PHP 8.1
6. Encore
7. npm
8. yarn
9. El bundle Symfony UX con Charts.js

Instalamos Scoop, luego Symfony CLI tal como se explica en la página oficial de Symfony.

Creamos un proyecto nuevo con el nombre de «grafico», para ello, en nuestra terminal de Windows escribimos y ejecutamos:

symfony new –webapp grafico

Instalamos sucesivamente desde la terminal de Windows:

composer require encore

yarn install

npm install

composer require symfony/ux-chartjs

Con todas estas herramientas ya instaladas, podemos empezar a escribir el código de nuestro gráfico. Elegimos hacer un gráfico de barras que refleje las ventas de una empresa.

El controlador

Procedemos a crear con nuestro editor de texto favorito un nuevo controlador que llamaremos GraficoController.php con el siguiente código que explicaremos a continuación:

En esta primera parte del controlador, vemos en especial las líneas 7 y 8 que fueron añadidas por Symfony y Composer cuando instalamos UX-chartjs y que activan las librerías necesarias para generar el gráfico.

Elegimos construir un gráfico de barras, esto se define en la línea 15 del gráfico anterior.

No trabajaremos con datos de una base de datos sino que definiremos dos arrays con los datos a graficar, uno para el eje horizontal o eje x, que se define como labels en la fila 17 y otro array para el contenido de cada barra, que puede verse en la imagen siguiente en la línea 23 con el nombre de data. La etiqueta para los datos se define en la fila 20 con el nombre de label, en la línea 21 definimos el color de las columnas: azul (blue) y en la fila 22 el color de borde (blanco en este caso). Con esta información tenemos los datos básicos para construir el gráfico, pero para personalizarlo aún más nos falta un poco de trabajo adicional.

A partir de la línea 29 definimos las opciones adicionales. En la línea 36, definimos el tamaño del font de la etiqueta o label que denominamos «Ventas». A partir de la línea 43 las escalas y tamaño de la fuente para el eje vertical (valor máximo de 4000 y tamaño de la fuente en 20) y para el eje horizontal, también le asignamos una fuente de tamaño 20 (ver fila 58 en la tercera imagen).

Finalmente, enviamos a nuestra plantilla denominada grafico.html.twig los valores contenidos en el array chart que incluye las opciones que decidimos para los ejes:

La plantilla de Twig

Enviados los datos a la plantilla grafico.html.twig mostramos a continuación su contenido que es muy sencillo. Lo básico y esencial está en la línea 10 de la siguiente imagen donde renderizamos el gráfico con los datos provistos por el controlador:

El archivos base.html.twig también contiene información esencial para configurar correctamente el gráfico que queremos construir. Los datos claves están en las líneas 7 y 11 de la siguiente imagen:

Finalmente, para visualizar el gráfico, desde la línea de comandos iniciamos el servidor de symfony haciendo:

symfony serve -d

Y luego arrancamos yarn, ejecutando desde la linea de comandos:

yarn watch

Para ver el gráfico vamos a nuestro navegador preferido, en mi caso Firefox, y en una ventana nueva escribimos la siguiente dirección local: localhost:8000/grafico

Finalmente obtenemos:

Otro tipo de gráfico que podemos utilizar para estos datos es el gráfico de línea. Cambiamos el color en el controlador para el borde a red (línea 22 «borderColor => «red»):

En el gráfico de arriba se pueden apreciar los puntos azules con la medición de cada mes y la línea roja, que definimos como color de borde. Si acercamos el puntero del mouse a cada punto del gráfico, podemos ver los valores exactos de las ventas de cada mes.