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