Crear gráficas con PHP: Chart.js con datos en JSON, JpGraph y GD

Para crear gráficas con PHP, la forma más práctica hoy es que PHP prepare los datos y una librería JavaScript como Chart.js los dibuje en el navegador. PHP saca los números de tu base de datos, los convierte a JSON con json_encode() y Chart.js pinta barras, líneas o sectores sobre un elemento <canvas>. Si lo que necesitas es una imagen generada en el servidor, por ejemplo para meterla en un PDF, entonces sí tiene sentido una librería PHP como JpGraph o la extensión GD.

Gráficas con PHP y Chart.js

Chart.js es de código abierto, con licencia MIT, y lo mantiene su comunidad. Tiene ocho tipos de gráfica, todos animados y configurables. Se puede instalar con npm o cargar desde un CDN, que para empezar es lo más rápido.

Este ejemplo junta las dos partes en un solo fichero PHP. Los datos de $ventas están escritos a mano para que se entienda, pero en la práctica saldrían de tu consulta a la base de datos:

<?php
$ventas = ['Enero' => 120, 'Febrero' => 95, 'Marzo' => 140];
$datos = [
    'etiquetas' => array_keys($ventas),
    'valores'   => array_values($ventas),
];
?>
<div><canvas id="grafica"></canvas></div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const datos = <?= json_encode($datos, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) ?>;

new Chart(document.getElementById('grafica'), {
    type: 'bar',
    data: {
        labels: datos.etiquetas,
        datasets: [{ label: 'Ventas', data: datos.valores, borderWidth: 1 }]
    },
    options: { scales: { y: { beginAtZero: true } } }
});
</script>

Lo que hace PHP aquí es poco y es lo importante: construir un array con las etiquetas y los valores y pasarlo a JSON. Las opciones JSON_HEX_TAG, JSON_HEX_AMP, JSON_HEX_APOS y JSON_HEX_QUOT convierten los caracteres <, >, &, el apóstrofo y las comillas en secuencias < y similares. Así, si una etiqueta que viene de la base de datos contiene algo como </script>, no rompe la página. Yo las pondría siempre que metas JSON dentro de una etiqueta <script>.

El contenedor <div> alrededor del <canvas> no es decorativo. La documentación de Chart.js recomienda darle a cada gráfica su propio contenedor para que se adapte bien al ancho de la pantalla.

Para cambiar de tipo basta con tocar type: 'line' para líneas, 'pie' para un gráfico de sectores, y así con el resto de los que trae.

Datos que cambian a menudo

Si la gráfica tiene que refrescarse sin recargar la página, o la usan varias pantallas, separa las piezas. Un fichero PHP devuelve solo el JSON, con la cabecera Content-Type: application/json, y la página lo pide con fetch() y se lo pasa a Chart.js. Es el mismo json_encode() de antes, solo que en una dirección propia.

Y si necesitas la gráfica como imagen, Chart.js tiene el método toBase64Image(), que devuelve el lienzo en ese momento como una imagen PNG (o JPEG si se lo pides) codificada en base64. Sirve para un botón de descargar o para mandarla al servidor.

Gráficas generadas en el servidor con PHP

Hay casos en los que no hay navegador que ejecute JavaScript: un informe en PDF que se genera por la noche, una imagen que se adjunta o se guarda en disco. Ahí la gráfica tiene que salir de PHP como imagen.

JpGraph es la librería veterana para eso y sigue al día: funciona con PHP 8 y tiene líneas, barras, sectores en 2D y 3D, dispersión, radar, diagramas de Gantt y caché de las imágenes generadas. Necesita la extensión GD de PHP. Ojo con la licencia, que es doble: la versión libre va con licencia QPL para uso no comercial, de código abierto o educativo, y para un proyecto comercial piden la licencia Professional, de pago.

Para algo muy sencillo, una barra de progreso o un par de columnas, puedes tirar directamente de GD, la extensión de imágenes de PHP, que crea y manipula imágenes en GIF, PNG, JPEG y otros formatos. Dibujas rectángulos y texto a mano. Para algo más que eso, sale más a cuenta una librería.

Si el destino es un PDF, en la guía de DomPDF para convertir HTML a PDF verás cómo montarlo. DomPDF admite imágenes PNG, así que lo directo es generar la gráfica como imagen e incluirla en el HTML que conviertes.

Qué fue de pChart

En 2011 recomendé aquí pChart, una librería PHP que generaba gráficas muy vistosas. Hoy la web oficial del proyecto ya no está activa. Existe un port llamado c-pchart que la adapta a Composer y a PHP 8, pero su autor avisa de que solo lo mantiene de forma básica, sin funciones nuevas. Y la licencia arrastra un problema: es GPL v3 y para uso comercial había que pagar al autor original, con quien el propio mantenedor dice no haber podido contactar. Para un proyecto nuevo no la elegiría.

Cuál usar

Para una web o un panel de administración, Chart.js con los datos en JSON desde PHP. Es lo más sencillo, las gráficas son interactivas y no cargas el servidor dibujando imágenes. JpGraph o GD los dejaría para cuando la gráfica tenga que existir como fichero sin pasar por un navegador.

Revisado y actualizado en octubre de 2026.