Cómo crear un gráfico de datos dinámico mediante Chart.js y PHP

Si quieres mostrar estadísticas, los gráficos son una de las mejores maneras de llevarlo a cabo ya que, es una vía estupenda para entender los datos. Existen muchísimas librerías para gráficos como Google Charts, Highcharts, Chart.js y muchas más. Ya os hemos hablado en un tutorial anterior sobre cómo crear gráficos utilizando Highcharts. En esta ocasiób vamos a ver cómo crear un gráfico de datos utilizando la librería Charts.js.

Crear gráficos utilizando Chart.js es muy simple y muy sencillo. En nuestro ejemplo, recuperaremos los datos de una tabla de nuestra base de datos, en concreto de la tabla tbl_marks la cual contendrá calificación de estudiantes. Leeremos dichas calificaciones y se las pasaremos a la librería Chart.js para que muestre el gráfico que veamos consecuente.

Canvas de HTML5

Descarga la librería Chartjs de GitHUb e incluye sus ficheros en tu ejemplo. En la página HTML principal, contaremos con un canvas HTML5 en donde mostraremos nuestro gráfico. Al cargar dicha página, enviaré una solicitud AJAX al PHP en el que leeremos las calificaciones de los estudiantes de la base de datos. Después, parsearemos la respuesta JSON recibida y utilizada como parámetro de la función de Chart.js para crear el gráfico.

<!DOCTYPE html>
<html>
<head>
<title>Creating Dynamic Data Graph using PHP and Chart.js</title>
<style type="text/css">
BODY {
    width: 550PX;
}

#chart-container {
    width: 100%;
    height: auto;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>


</head>
<body>
    <div id="chart-container">
        <canvas id="graphCanvas"></canvas>
    </div>

    <script>
        $(document).ready(function () {
            showGraph();
        });


        function showGraph()
        {
            {
                $.post("data.php",
                function (data)
                {
                    console.log(data);
                     var name = [];
                    var marks = [];

                    for (var i in data) {
                        name.push(data[i].student_name);
                        marks.push(data[i].marks);
                    }

                    var chartdata = {
                        labels: name,
                        datasets: [
                            {
                                label: 'Student Marks',
                                backgroundColor: '#49e2ff',
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: marks
                            }
                        ]
                    };

                    var graphTarget = $("#graphCanvas");

                    var barGraph = new Chart(graphTarget, {
                        type: 'bar',
                        data: chartdata
                    });
                });
            }
        }
        </script>

</body>
</html>

Código PHP

Llamaremos a este archivo data.php vía AJAX para acceder a la base de datos y así, leer las calificaciones de los estudiantes. Una vez leídos los registros, los devolveremos en formato JSON. El código sería...

<?php
header('Content-Type: application/json');

require_once('db.php');

$sqlQuery = "SELECT student_id,student_name,marks FROM tbl_marks ORDER BY student_id";

$result = mysqli_query($conn,$sqlQuery);

$data = array();
foreach ($result as $row) {
	$data[] = $row;
}

mysqli_close($conn);

echo json_encode($data);
?>

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP