Cómo renderizar el gráfico usando Google Charts. Google Charts API proporciona opciones para generar de forma dinámica una variedad de gráficos que son muy útiles para nuestros sistemas como ser:
a) Gráfico circular.
b) Gráfico de columnas y más.
El uso de esta API es fácil de implementar y por consiguiente crear los informes gráficos para nuestros resultados de una consulta con PHP & MySQL. En estrada informativa, vamos a implementar paso a paso la forma de generar el informe gráfico de asistencia utilizando Google Chart API.
¿Cómo funciona el sistema?
Necesitaremos de una base de datos de empleados para obtener los datos de asistencia. Por lo tanto, estos datos recopilados a partir de la base de datos se mostraran en el gráfico creado mediante la API de Google Charts. Sin embargo, este gráfico de asistencia se mostrará en dos tipos de gráficos circulares y gráfico de columnas.
El gráfico generado de tipo circular mostrará los datos en porcentaje. Los presentes y ausente del empleado en porcentaje.
Ahora, el gráfico generado de columnas, el recuento de asistencia del empleado se mostrará en lugar del porcentaje. Hemos usado dos colores personalizados para mostrar la variación entre los datos de asistencia:
a) Los empleados presentes de color azul.
b) Los empleados ausentes de color plomo oscuro.
Cómo renderizar el gráfico usando Google Charts
A continuación, mostraremos los procesos necesarios para que nuestro sistema funcione correctamente.
Script de base de datos MySQL
El siguiente script de MySQL que contiene la instrucción CREATE y los datos de la tabla «personal«. Contiene la información del empleado con datos de asistencia.
CREATE TABLE `personal` ( `id` int(2) NOT NULL, `nombre` varchar(20) NOT NULL, `genero` varchar(10) NOT NULL, `attendance` tinyint(1) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='Tabla Personal'; -- -- Volcado de datos para la tabla `personal` -- INSERT INTO `personal` (`id`, `nombre`, `genero`, `attendance`) VALUES (1, 'Mario Oxenford', 'Hombre', 1), (2, 'Melizza Gilber', 'Mujer', 1), (3, 'Paul Fernandez', 'Hombre', -1), (4, 'Karolina Morales', 'Mujer', -1), (5, 'Luisa Giron', 'Mujer', 1), (6, 'David Hinojosa', 'Hombre', 1), (7, 'Valeria Souza', 'Mujer', -1), (8, 'Marcos Zeballos', 'Hombre', 1), (9, 'Esperanza Venegas', 'Mujer', 1), (10, 'Florentino Carpio', 'Hombre', 1); -- Indices de la tabla `personal` -- ALTER TABLE `personal` ADD PRIMARY KEY (`id`); COMMIT;
HTML para representar gráfico de asistencia con Google Charts
Es la sección principal del sistema y veremos el código de página con HTML. En este apartado, el código HTML se usará para crear etiquetas de contenedor como los elementos de destino. Estas ID de elemento de destino se referirá en el script de gráficos.
Se implementara el script de Google Chart API y se cargará mediante un JavaScript incluido. Esta API incluye la dependencia para crear la instancia de la API de visualización de Google. Esta instancia se utilizará para crear varios tipos de gráficos de Google en función de la especificación y también incorporando a MySQL como fuente de la información.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Cómo renderizar el gráfico usando Google Charts | BaulPHP</title>
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/sticky-footer-navbar.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawPieChart);
function drawPieChart()
{
var pie = google.visualization.arrayToDataTable([
['attendancede', 'Numbder'],
['<?php echo $label[0]; ?>', <?php echo $count[0]; ?>],
['<?php echo $label[1]; ?>', <?php echo $count[1]; ?>],
]);
var header = {
title: 'Porcentaje de asistencia de empleados',
slices: {0: {color: '#666666'}, 1:{color: '#006EFF'}}
};
var piechart = new google.visualization.PieChart(document.getElementById('piechart'));
piechart.draw(pie, header);
}
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawColumnChart);
function drawColumnChart() {
var bar = google.visualization.arrayToDataTable([
['attendance','Contar',{ role: "style" } ],
['<?php echo $label[1]; ?>', <?php echo $count[1]; ?>,"#006EFF"],
['<?php echo $label[0]; ?>', <?php echo $count[0]; ?>,"#666666"]
]);
var columnview = new google.visualization.DataView(bar);
columnview.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var header = {
title: 'Asistencia del empleado',
bar: {groupWidth: "50%"}
};
var barchart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
barchart.draw(columnview, header);
}
</script>
</head>
<body>
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#">BaulPHP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="index.php">Inicio <span class="sr-only">(current)</span></a> </li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Buscar" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Busqueda</button>
</form>
</div>
</nav>
</header>
<!-- Begin page content -->
<div class="container">
<h3 class="mt-5">Cómo renderizar el gráfico usando Google Charts</h3>
<hr>
<div class="row">
<div class="col-12 col-md-10">
<!-- Contenido -->
<div id="piechart"></div>
<div id="columnchart"></div>
</div>
<!-- Fin Contenido -->
</div>
</div>
<!-- Fin row -->
</div>
<!-- Fin container -->
<footer class="footer">
<div class="container"> <span class="text-muted">
<p>Códigos <a href="https://baulphp.com/" target="_blank">BaulPHP</a></p>
</span> </div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<script src="dist/js/bootstrap.min.js"></script>
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
Gráfico circular usando la API de Google
A continuación mostraremos el código JavaScript para la correcta implementación.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawPieChart);
function drawPieChart()
{
var pie = google.visualization.arrayToDataTable([
['attendancede', 'Numbder'],
['<?php echo $label[0]; ?>', <?php echo $count[0]; ?>],
['<?php echo $label[1]; ?>', <?php echo $count[1]; ?>],
]);
var header = {
title: 'Porcentaje de asistencia de empleados',
slices: {0: {color: '#666666'}, 1:{color: '#006EFF'}}
};
var piechart = new google.visualization.PieChart(document.getElementById('piechart'));
piechart.draw(pie, header);
}Gráfico de columnas Usando la API de Google
El grafico tipo de columnas se crea llamando a la visualización de Google DataView. El DataTable se pasa a la vista de gráfico para trazar los datos de asistencia. Sin embargo, también interactúa con la base de datos para desplegar los registros de la consulta.
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawColumnChart);
function drawColumnChart() {
var bar = google.visualization.arrayToDataTable([
['attendance','Contar',{ role: "style" } ],
['<?php echo $label[1]; ?>', <?php echo $count[1]; ?>,"#006EFF"],
['<?php echo $label[0]; ?>', <?php echo $count[0]; ?>,"#666666"]
]);
var columnview = new google.visualization.DataView(bar);
columnview.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var header = {
title: 'Asistencia del empleado',
bar: {groupWidth: "50%"}
};
var barchart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
barchart.draw(columnview, header);
}Código PHP para obtener datos de asistencia de la base
Básicamente, necesitamos de una consulta PHP usando la cláusula SELECT para obtener los datos de asistencia de la base de datos. Por lo tanto, en esta consulta, he utilizado las sentencias de caso de MySQL para obtener el título de asistencia y contador de forma condicional.
El nombre de alias de asistencia se utiliza para obtener el título y el «present_absent_count» es obtener el recuento de asistencia. Estos datos se forman en un formato de matriz PHP y se cargan en el gráfico DataTable al inicializar la instancia del gráfico para representar el gráfico de asistencia.
<?php
$connect = mysqli_connect("localhost", "root", "test", "blog_samples");
$query = "SELECT count(*) as present_absent_count, attendance,
case
when attendance = 1 then 'Present'
when attendance = -1 then 'Absent'
end as attendance FROM employee GROUP BY attendance ;";
$result = mysqli_query($connect, $query);
$i=0;
while ($row = mysqli_fetch_array($result)) {
$label[$i] = $row["attendance"];
$count[$i] = $row["present_absent_count"];
$i++;
}
?>Salida gráfica de asistencia con gráficos de Google
La siguiente captura de pantalla muestra el gráfico de asistencia al empleado con el gráfico circular y el gráfico de columnas utilizando Google Charts API. Al pasar el cursor por los sectores del gráfico y la columna, la información de asistencia se mostrará con una información sobre herramientas.
CONCLUSIÓN DEL SISTEMA
- Siempre lo hemos dicho, el uso de los gráficos son muy recomendados para cualquier sistema ya que despliega la información para que a simple vista se pueda entender a la perfección.
- Existen varias APIS para mostrar gráficos dinámicos pero en esta ocasión les traigo el API de Google. Por su curva de aprendizaje e implementación es muy baja. Es decir muy fácil de implementar.
DESCARGAR SCRIPT
Les dejare un comprimido para que ustedes puedan descargarlo e implementarlo en seis sistemas web.
[sociallocker id=5099] Descargar Script [/sociallocker]
