Portada » Lenguaje PHP » Gráficos dinámicos en columnas con PHP y Google Chart API

Gráficos dinámicos en columnas con PHP y Google Chart API

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 ciudad y luego usando la clausula(id).
  • Nos apoyaremos en el bucle while para recuperar y/o mostrar los registros y almacene los datos en $data Array.
  • Convierta $data Array en formato JSON usando json_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 objeto JSON usando JSON.parse().
  • Cree una matriz chartinfo y en el primer índice almacene la información del encabezado:
  • Haga un bucle en el obj y lea el nombre de la ciudad y el total de usuarios. Almacene valores en chartinfo Array, especifique sus datos entre [][ciudad,totalusers,totalusers].
  • Pase directamente chartinfo a google.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

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad