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);
?>