Gráficos dinámicos en columnas con PHP. Los gráficos estadísticos visuales tipo columnas son uno de los gráficos más comunes y utilizados. Podemos mostrar información de cualquier índole y es muy adaptable a nuestras necesidades.
Gráficos dinámicos en columnas con PHP y Google Chart API
Una de las fuentes para generar gráficos es la API de gráficos de Google que permite crear diferentes tipos de gráficos como: circular, de barras, de líneas, de columnas, etc. Sin embargo, toma el valor del tipo de matriz como datos.
- Crear base de datos y una tabla
- Conexión de base de datos
- Estructura de datos y gráficos
- JavaScript: crear gráfico de columnas
En este tutorial, aprenderemos a crear un gráfico de columnas usando Google Chart API y cargar datos MySQL dinámicamente usando PHP.
a) Crear base de datos y una tabla
Crearemos una base de datos llamado grafico_chart por ejemplo y luego tenemos que crear una tabla que tendrá por nombre empleados, además debe poseer la siguiente estructura.
-- Estructura de tabla para la tabla `empleados`
CREATE TABLE `empleados` (
`id` int(11) NOT NULL,
`emp_nombre` varchar(80) NOT NULL,
`salario` varchar(20) NOT NULL,
`genero` varchar(10) NOT NULL,
`ciudad` varchar(80) NOT NULL,
`email` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-- Volcado de datos para la tabla `empleados`
INSERT INTO `empleados` (`id`, `emp_nombre`, `salario`, `genero`, `ciudad`, `email`) VALUES
(1, 'Yogesh', '40000', 'masculino', 'Florida', 'yogesh@domain.com'),
(2, 'Vishal', '28000', 'masculino', 'Brasilia', 'vishal@domain.com'),
(3, 'Vijay', '35000', 'masculino', 'Miami', 'vijayec@domain.com'),
(4, 'Rahul', '25000', 'masculino', 'Florida', 'rahul512@domain.com'),
(5, 'Sonarika', '50000', 'femenino', 'Santiago', 'bsonarika@domain.com'),
(6, 'Jitentendre', '48000', 'masculino', 'Barcelona', 'jiten94@domain.com'),
(7, 'Aditya', '36000', 'masculino', 'Brasilia', 'aditya@domain.com'),
(8, 'Anil', '32000', 'masculino', 'Caracas', 'anilsingh@domain.com'),
(9, 'Sunil', '48000', 'masculino', 'Brasilia', 'sunil1993@domain.com'),
(10, 'Akilesh', '52000', 'masculino', 'Miami', 'akileshsahu@domain.com'),
(11, 'Raj', '48000', 'masculino', 'Quito', 'rajsingh@domain.com'),
(12, 'Mayank', '54000', 'masculino', 'Santiago', 'mpatidar@domain.com'),
(13, 'Shalu', '43000', 'femenino', 'Barcelona', 'gshalu521@domain.com'),
(14, 'Ravi', '32000', 'masculino', 'Quito', 'ravisharma21@domain.com'),
(15, 'Shruti', '45000', 'femenino', 'Delhi', 'shruti@domain.com'),
(16, 'Rishi', '38000', 'masculino', 'Santiago', 'rishi121@domain.com'),
(17, 'Rohan', '47000', 'masculino', 'Miami', 'rohansingh@domain.com'),
(18, 'Priya', '28000', 'femenino', 'Caracas', 'priya1992@domain.com'),
(19, 'Rakesh', '34000', 'masculino', 'Barcelona', 'rakesh@domain.com'),
(20, 'Vinay', '34000', 'masculino', 'Delhi', 'vinaysingh@domain.com'),
(21, 'Tanu', '41000', 'femenino', 'Brasilia', 'Tanu@domain.com'),
(22, 'Ajay', '28000', 'masculino', 'Barcelona', 'ajay93@domain.com'),
(23, 'Nikhil', '46000', 'masculino', 'Brasilia', 'nikhil@domain.com'),
(24, 'Arav', '28000', 'masculino', 'Santiago', 'aravsingh@domain.com'),
(25, 'Madhu', '32000', 'femenino', 'Delhi', 'madhu@domain.com'),
(26, 'Sagar', '44000', 'masculino', 'Quito', 'sagar@domain.com'),
(27, 'Anju ', '30000', 'femenino', 'Santiago', 'anju@domain.com'),
(28, 'Rajat', '28000', 'masculino', 'Caracas', 'rajat@domain.com'),
(29, 'Anjali', '32000', 'femenino', 'Delhi', 'anjali@domain.com'),
(30, 'Saloni', '32000', 'femenino', 'Miami', 'saloni@domain.com'),
(31, 'Mayur', '28000', 'masculino', 'Barcelona', 'mayur@domain.com'),
(32, 'Pankaj', '32000', 'masculino', 'Caracas', 'pankaj@domain.com'),
(33, 'Hrithik', '33000', 'masculino', 'Brasilia', 'hrithik@domain.com');
ALTER TABLE `empleados`
ADD PRIMARY KEY (`id`);
ALTER TABLE `empleados`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=34;b) Conexión de base de datos
Vamos a crear un archivo llamado config.php para la configuración de la base de datos. Por lo tanto, tendrá un rol importante de almacenar las credenciales MySQL para su conexión.
Además, a través de esta conexión podremos extraer información de la tabla empleados que hemos creado en el punto A.
<?php
session_start();
$host = "localhost"; /* Host */
$user = "root"; /* Usuario */
$password = ""; /* Password */
$dbname = "grafico_chart"; /* Database nombre */
// Creamos la conexion mysql
$con = mysqli_connect($host, $user, $password,$dbname);
// Comprobamos la cnexion
if (!$con) {
die("Connection failed: " . mysqli_connect_error());
}
?>c) Estructura de datos y gráficos
Para visualizar el gráfico usaremos un archivo llamado index.php. Sin embargo, este archivo servirá para mostrar el gráfico dinámico en columnas.
- Ejecutamos la consulta de selección de datos en la tabla de empleados para contar el número de empleados por una ciudad en especifico, para esto utilicé
GROUP BY ciudady luego usando la clausula(id). - Nos apoyaremos en el bucle while para recuperar y/o mostrar los registros y almacene los datos en
$dataArray. - Convierta
$dataArray en formatoJSONusandojson_encode(). Los datos JSON se almacenan dentro de un elemento<textarea id="chartinfo">oculto. Este almacenamiento oculto se utilizará durante la inicialización del gráfico en JavaScript. - Incluya Google Chart JS y charts.js. El archivo charts.js se crea en el siguiente paso.
<?php
include "config.php";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dinamico datos con chart usando php y google chart api</title>
</head>
<body>
<?php
// Consulta sql para contar la cantidad por ciudad
$sql = "SELECT ciudad,count(id) as totalusers FROM `empleados` GROUP BY ciudad ORDER BY ciudad";
$records = mysqli_query($con, $sql);
$data = array();
while($row = mysqli_fetch_assoc($records)){
$data[] = $row;
}
$jsonData = json_encode($data);
?>
<!-- Almacenamos JSON data -->
<textarea style="display:none" id="chartinfo"><?= $jsonData ?></textarea>
<!-- Chart generando grafico-->
<div id="ciudadChart" style="width:100%; height:500px;"></div>
<!-- Script JS -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="chart.js"></script>
</body>
</html>d) JavaScript: crear gráfico de columnas
Crearemos el archivo chart.js para inicializar el gráfico de columnas de google.
- En la función
drawChart(), obtenga datos del gráfico de<textarea id="chartinfo">y asígnelos a la variable de datos, conviértalos en un objetoJSONusandoJSON.parse(). - Cree una matriz
chartinfoy en el primer índice almacene la información del encabezado: - Haga un bucle en el
objy lea el nombre de la ciudad y el total de usuarios. Almacene valores enchartinfoArray, especifique sus datos entre[]–[ciudad,totalusers,totalusers]. - Pase directamente
chartinfoagoogle.visualization.arrayToDataTable(). - Inicialice el gráfico en ciudadChart.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartData_json = document.getElementById('chartinfo').value;
let obj = JSON.parse(chartData_json) ;
let jsonData = obj;
var chartData = [];
// Add Chart data
var chartData = [
['Ciudad','Total Personal',{ role: 'annotation'}],
];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
var val = obj[key];
var city = val.ciudad;
var totalusers = Number(val.totalusers);
// Add to Array
chartData.push([city,totalusers,totalusers]);
}
}
var data = google.visualization.arrayToDataTable(chartData);
// Options
var options = {
title:'Reporte por ciudad',
colors: ['#4473c5']
};
// Initialize
var chart = new google.visualization.ColumnChart(document.getElementById('ciudadChart'));
chart.draw(data, options);
}Conclusión: Datos dinámicos en columnas con PHP y Google Chart API
Existen múltiples maneras de mostrar gráficos dinámicos para mostrar información en columnas, barras o circular. Los gráficos de columnas son una forma eficaz de presentar datos en un formato visualmente atractivo y fácil de entender. Sin embargo, existen varias librerías con integraciones PHP y MySQL puedes hacerlo dinámico.
Si está intentando usar gráficos en su aplicación web, puede optar por este ejemplo también para cargar datos de forma dinámica desde una base de datos.
Ver Demostración
