Generar gráficas de barras con PHP y MySQL usando Chart.js

Generar gráficas de barras con PHP y MySQL usando Chart.js

En este post voy a compartir como generar  gráficas de barras con PHP y MySQL usando Chart.js, he querido usar este ejemplo ya que uso este tipo de gráficas  en uno de mis sistemas web de pago: Sistema de Control de Inventario y Facturación y he pensado que podría ser útil compartir esta información, sobre como generar dichos gráficos.

Empezando

He usado el CDN de Bootstrap y jQuery en este tutorial, así que necesitas conexión a Internet para que funcionen. La librería Chart.js  que he utilizado en este tutorial se incluye en el archivo descargable de este tutorial.

Creando nuestra base de datos

Primero, vamos a crear nuestra base de datos.

1. Abre phpMyAdmin.
2. Haz clic en bases de datos, cree una base de datos y asígnele el nombre como test_chartjs (asi la he nombrado para este ejemplo).
3. Después de crear una base de datos, haz clic en el SQL y pega el código a continuación.

Creando conexión a la base de datos

Ahora vamos a crear la conexión a la base de datos, para ello creamos un archivo llamado “conexion.php” y pegamos el código siguiente:

index.php

Este es nuestro archivo de inicio  que contiene nuestro formulario de adición simple de datos y nuestra representación estadística de datos extraídos de la base de datos. Esto también contiene nuestro script de que genera la gráfica de barras.

add_data.php

Este es nuestro código PHP que permite  agregar registros a nuestra base de datos.

data.php

Por último, vamos a crear  nuestro código PHP que contiene los datos que se van a utilizar para generar la gráfica de barras con PHP y MySQL  usando chart.js

Y aquí termina este tutorial. Te invito a que descargues los archivos fuentes usados para este ejemplo y realices las pruebas que consideres necesarias.

DESCARGAR ARCHIVOS