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.

See the gist on github.

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

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í:

See the gist on github.

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.