Breaking

Post Top Ad

Your Ad Spot

martes, 8 de mayo de 2018

Crear un gráfico de datos dinámico mediante Chart.js y PHP

Resultado de imagen para Crear un gráfico de datos dinámico mediante Chart.js y PHP 

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

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas