Guia Crear Graficas con Chartjs, PHP y MySQL

Vamos a crear una grafica de barra usando la libreria ChartJs, PHP y MySQL ejemplo muy util para visualizacion de datos en un sistema.

📌 Este contenido es parte del Hub de Ingeniería de evilnapsis.com
← Volver al hub

Chart.js es una librería de JavaScript de código abierto que permite crear gráficas interactivas y responsivas en aplicaciones web. A diferencia de otras librerías que utilizan SVG, Chart.js renderiza las gráficas utilizando el elemento Canvas de HTML5, lo que le otorga un excelente rendimiento incluso con grandes volúmenes de datos.

¿Por qué usar Chart.js en tus proyectos?

Para un desarrollador que trabaja con el stack PHP/MySQL (como solemos hacer en los sistemas de evilnapsis), Chart.js es la opción ideal por varias razones:

1. Ligereza: El core de la librería es pequeño, lo que no afecta la velocidad de carga de tu sitio.

2. Responsividad: Las gráficas se adaptan automáticamente al tamaño de la pantalla (PC, Tablet o Móvil).

3. Animaciones nativas: Incluye transiciones fluidas al cargar los datos, lo que mejora la experiencia del usuario (UX).

4. Extensibilidad: Permite añadir plugins para manejar escalas logarítmicas, fechas complejas o etiquetas personalizadas.

Grafica de lineas y barras

Las gráficas de barras y líneas son el estándar de oro en los sistemas de gestión (ERP/POS) porque permiten una lectura rápida de la tendencia y la comparativa.

• Gráfica de Barras: Es ideal para comparar categorías discretas o periodos de tiempo específicos (ej. Ventas por mes). Su ventaja visual radica en que la diferencia de altura entre las barras permite al usuario identificar rápidamente el “pico” más alto o la caída más drástica en el stock o las ventas.

• Gráfica de Líneas: Perfecta para visualizar la continuidad y la progresión. En lugar de ver bloques aislados, el usuario ve una “trayectoria”. Es la mejor opción para mostrar el crecimiento de usuarios en una plataforma o la fluctuación de precios a lo largo de un año.

Ir al Tutorial Crear Grafica de lineas y Barras con ChartJS →

Grafica de Pie y Dona

A diferencia de las barras, estas gráficas no se enfocan en el tiempo, sino en la composición del total.

• Lógica de Datos: Para que una gráfica de Pie sea efectiva, la suma de todas sus partes debe representar el 100%. Es excelente para responder preguntas como: “¿Qué porcentaje de mis ventas totales proviene de la categoría de ‘Bebidas’?” o “¿Cuál es la distribución de mis pacientes por especialidad médica en BookMedik?”.

• Dona vs. Pie: La gráfica de Dona es una variante moderna que permite aprovechar el espacio central para colocar un dato clave (como el total general), lo que la hace muy popular en dashboards administrativos modernos construidos con CoreUI o Bootstrap.

Ir al Tutorial Crear Grafica de Pie y Dona con ChartJS → 

Guardar la imagen de una grafica Chart.js con PHP

• El Proceso toDataURL(): Como Chart.js dibuja en un <canvas>, los píxeles viven solo en la memoria del navegador. Al usar toDataURL(), convertimos esos píxeles en una cadena Base64.

• Procesamiento en el Servidor (PHP): Al enviar ese Base64 a PHP, tenemos el poder de crear un archivo físico .png. Esto es vital para:

  1. Generar reportes mensuales en PDF que se guarden en el servidor.

  2. Enviar resúmenes de ventas automáticos por correo electrónico sin depender de que el cliente abra el navegador.

  3. Mantener un historial visual de métricas sin necesidad de recalcular los datos antiguos.

Ir al Tutorial Guardar imagen de una grafica Chart.js con PHP → 

Base de datos

Usaremos una base de datos con una sola tabla que contendra las fecha de venta y valores.

create database chartjs10; use chartjs10;

create table venta( 
id int not null auto_increment primary key, 
date_at date, val double ); 

insert into venta(date_at,val) value ("2019-01-01",100); 
insert into venta(date_at,val) value ("2019-01-02",80); 
insert into venta(date_at,val) value ("2019-01-03",205); 
insert into venta(date_at,val) value ("2019-01-04",323); 
insert into venta(date_at,val) value ("2019-01-05",110); 
insert into venta(date_at,val) value ("2019-01-06",40); 
insert into venta(date_at,val) value ("2019-01-07",80); 
insert into venta(date_at,val) value ("2019-01-08",220); 
insert into venta(date_at,val) value ("2019-01-09",95); 
insert into venta(date_at,val) value ("2019-01-10",120); 
insert into venta(date_at,val) value ("2019-01-11",249); 
insert into venta(date_at,val) value ("2019-01-12",157); 
insert into venta(date_at,val) value ("2019-01-13",199); 
insert into venta(date_at,val) value ("2019-01-14",30); 
insert into venta(date_at,val) value ("2019-01-15",290);

Agregamos 15 registros iniciales.

Para instalar la base de datos tenemos que seguir los siguientes pasos:

• Iniciar el xampp, apache y mysql
• Abrir una terminal de windows cmd.exe
• Ir al la ruta del mysql: cd \xampp\mysql
• Iniciar sesion en mysql: mysql -uroot
• Copiar el codigo SQl y pegarlo en la terminal o guardar el sql en un archivo y despues importar.

Codigo

Ahora vamos a empezar el codigo.

Lo primero que haremos sera obtener los registros de la base de datos y guardarlos en un array usando PHP.

// Conectar a la BD 
$con = new mysqli("localhost","root","","chartjs10"); 

// Consulta SQL 
$sql = "select * from venta"; 

// Ejecutar la consulta SQL $data = array(); 
$query = $con->query($sql); 

// Array donde vamos a guardar los datos 
while($r = $query->fetch_object()){ 
// Recorrer los resultados de Ejecutar la consulta SQL 
// Guardar los resultados en la variable $data 
    $data[]=$r; 
}

Con esto vamos a tener los resultados en una variable $data que mas adelante usaremos para crear la grafica.

Importar la libreria chart.min.js

<script src="chart.min.js"></script>

Crear un canvas contenedor para la grafica.

<canvas id="chart1" style="width:100%;" height="100"></canvas>

A continuacion el script para crear la grafica, es muy similar al ejemplo anterior, solo que ahora los datos los vamos a obtener recorriendo los resultados de la variable $data.

/**
 * Configuración de Gráfica de Ventas con Chart.js
 * Este bloque genera una gráfica de barras utilizando datos provenientes de PHP.
 */

// 1. Obtención del contexto del lienzo (canvas) del DOM
var ctx = document.getElementById("chart1");

// 2. Definición de los datos de la gráfica
var data = {
    // Etiquetas del eje X: Se generan dinámicamente recorriendo el objeto $data de PHP
    labels: [
        <?php foreach($data as $d): ?>
            "<?php echo $d->date_at; ?>", 
        <?php endforeach; ?>
    ],
    datasets: [{
        label: '$ Ventas', // Título del set de datos
        // Valores del eje Y: Se extraen las ventas (val) de cada objeto en PHP
        data: [
            <?php foreach($data as $d): ?>
                <?php echo $d->val; ?>,
            <?php endforeach; ?>
        ],
        // Estética de las barras
        backgroundColor: "#3898db", // Azul para el fondo de las barras
        borderColor: "#9b59b6",     // Morado para el borde de las barras
        borderWidth: 2              // Grosor del borde en píxeles
    }]
};

// 3. Opciones de configuración de la gráfica
var options = {
    scales: {
        yAxes: [{
            ticks: {
                // Garantiza que el eje vertical siempre comience en 0
                beginAtZero: true 
            }
        }]
    }
};

// 4. Inicialización de la instancia de Chart.js
var chart1 = new Chart(ctx, {
    type: 'bar',      // Define que la gráfica será de barras
    data: data,       // Asigna el objeto de datos definido arriba
    options: options  // Asigna las opciones de configuración
});

Voy a explicar la parte mas importante.

En las lineas 4,5 y 6 del script anterior se hace un recorrido de las etiquetas para la grafica, es decir las fechas, que usan el campo date_at. Estos valores deben ir dentro de comillas.

En las lineas 11,12 y 13 del script anterior se hace un recorrido de los valores para la grafica, los valores usan el campo val, estos valores no van necesariamente en comillas.

Recordamos que usamos la variable data por que los datos de las fechas y los valores correspondan unos con otros.

En la linea 30 es posible alternar entre los valores “bar” y “line” para obtener una grafica de barra o linea, respectivamente.

El resto de parametros ya lo explicamos en el ejemplo anterior.

Resultado

Descargar

Les dejo el link de descarga del ejemplo:

Link: Descargar Ejemplo

Finalizando

Modificando un poco el script puedes adaptarlo a tu propio sistema o base de datos. Tambien puedes modificar otros parametros como los colores, etc.

Espero este ejemplo te sirva, por fa si te sirvio dejanos un comentario 😉