Crear gráfica con PHP y Chart.js

Gráfica creada con PHP

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.

<?php
// Valores con PHP. Estos podrían venir de una base de datos o de cualquier lugar del servidor
$etiquetas = ["Enero", "Febrero", "Marzo", "Abril"];
$datosVentas = [5000, 1500, 8000, 5102];
?>

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

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

<!DOCTYPE html>
<html lang="es">
<?php
// Valores con PHP. Estos podrían venir de una base de datos o de cualquier lugar del servidor
$etiquetas = ["Enero", "Febrero", "Marzo", "Abril"];
$datosVentas = [5000, 1500, 8000, 5102];
?>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gráficas con chart.js y PHP | By Parzibyte</title>
    <!-- Importar chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
</head>

<body>
    <h1>Gráfica creada con PHP</h1>
    <a href="https://parzibyte.me/blog">By Parzibyte</a>
    <canvas id="grafica"></canvas>
    <script type="text/javascript">
        // Obtener una referencia al elemento canvas del DOM
        const $grafica = document.querySelector("#grafica");
        // Pasaamos las etiquetas desde PHP
        const etiquetas = <?php echo json_encode($etiquetas) ?>;
        // Podemos tener varios conjuntos de datos. Comencemos con uno
        const datosVentas2020 = {
            label: "Ventas por mes",
            // Pasar los datos igualmente desde PHP
            data: <?php echo json_encode($datosVentas) ?>,
            backgroundColor: 'rgba(54, 162, 235, 0.2)', // Color de fondo
            borderColor: 'rgba(54, 162, 235, 1)', // Color del borde
            borderWidth: 1, // Ancho del borde
        };
        new Chart($grafica, {
            type: 'line', // Tipo de gráfica
            data: {
                labels: etiquetas,
                datasets: [
                    datosVentas2020,
                    // Aquí más datos...
                ]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }],
                },
            }
        });
    </script>
</body>

</html>

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 con 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 aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

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/