En este post te mostraré cómo crear gráficas en la web (gráficas de barras, de línea, circulares) usando el lenguaje PHP y la librería chart.js.

Estrictamente hablando, no vamos a usar el lenguaje en sí para crear la gráfica, sino que vamos a usar PHP para pasar los valores a JavaScript y luego dejar que éste último renderice la gráfica usando Chart.js

De hecho esto es como una combinación entre el post de cómo pasar variables de PHP a JavaScript y el tutorial de Chart.js.

Lado del servidor

Primero veamos el lado del servidor. Vamos a necesitar las etiquetas y los valores. Para este caso supondremos que vamos a mostrar las ventas de 4 meses del año, así que necesitamos cuatro etiquetas y cuatro valores.

Obviamente estos valores pueden venir de cualquier medio de almacenamiento como puede ser una base de datos, aquí lo coloco así por simplicidad.

Lo que haremos a continuación será imprimir esos valores en el script que genera la gráfica, pasando una variable desde PHP a JavaScript.

Gráfica con PHP, Chart.js y JavaScript

Gráfica creada con PHP

Gráfica creada con PHP

Pasemos al ejemplo completo. En este caso todo el código debe estar en el mismo archivo para que las cosas funcionen. Recuerda que aquí no voy a tocar con detalle la generación de gráficas ni el paso de variables, pues eso ya está en los enlaces que te dejé al inicio del post.

El código completo queda así:

Estamos haciendo una gráfica como cualquier otra, pero ahora estamos pasando las variables desde PHP en la línea 25 y 30. Así que básicamente estamos creando una gráfica con PHP.

Conclusión

Si bien deben existir librerías para la creación de gráficas en el lado del servidor, recomiendo hacerlo del lado del cliente, ya que le quitamos bastante carga al servidor.

Igualmente este ejemplo es un poco sucio en cuanto al código, pues estamos mezclando los lenguajes. Lo ideal sería usar AJAX.

Como sea, te dejo la demostración en vivo dentro de este enlace, y también más tutoriales sobre PHP. Por cierto, si quieres generar otro tipo de gráficas mira este post en donde muestro más ejemplos y adapta el código para pasar las variables de PHP.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 1,020 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: