En este tutorial vamos a explicar cómo crear gráficos con la librería que nos ofrece Google "Google Charts". El tipo de gráfica que hemos escogido para este artículo es: Combo Chart.
La gráfica que vamos a generar por una parte será dinámica, es decir que la gráfica va a variar dependiendo de los datos almacenados en nuestra tabla (dentro de nuestra base de datos).
Para generar la gráfica vamos a utilizar los siguientes recursos:
- HTML5
- Google Charts
- jQuery
- PHP
- MySQL
Bien ahora vamos a por ello.
Empezaremos creando nuestra base de datos, luego ejecutar el siguiente código SQL
-- phpMyAdmin SQL Dump -- version 4.4.14 -- http://www.phpmyadmin.net -- -- Servidor: 127.0.0.1 -- Tiempo de generación: 03-12-2016 a las 21:26:14 -- Versión del servidor: 5.6.26 -- Versión de PHP: 5.6.12SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */;
-- -- Base de datos: `test_chart` --
-- --------------------------------------------------------
-- -- Estructura de tabla para la tabla `egresos` --
CREATE TABLE IF NOT EXISTS `egresos` ( `id` int(11) NOT NULL, `monto` double NOT NULL, `fecha` date NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=25 DEFAULT CHARSET=latin1;
-- -- Volcado de datos para la tabla `egresos` --
INSERT INTO `egresos` (`id`, `monto`, `fecha`) VALUES (1, 10, '2015-01-02'), (2, 97, '2015-02-02'), (3, 43, '2015-03-02'), (4, 37, '2015-04-02'), (5, 17, '2015-05-02'), (6, 29, '2015-06-02'), (7, 50, '2015-07-02'), (8, 96, '2015-08-02'), (9, 60, '2015-09-02'), (10, 73, '2015-10-02'), (11, 23, '2015-11-02'), (12, 43, '2015-12-02'), (13, 34, '2016-01-02'), (14, 42, '2016-02-02'), (15, 17, '2016-03-02'), (16, 34, '2016-04-02'), (17, 61, '2016-05-02'), (18, 71, '2016-06-02'), (19, 39, '2016-07-02'), (20, 89, '2016-08-02'), (21, 36, '2016-09-02'), (22, 66, '2016-10-02'), (23, 54, '2016-11-02'), (24, 91, '2016-12-02');
-- --------------------------------------------------------
-- -- Estructura de tabla para la tabla `ingresos` --
CREATE TABLE IF NOT EXISTS `ingresos` ( `id` int(11) NOT NULL, `monto` double NOT NULL, `fecha` date NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=49 DEFAULT CHARSET=latin1;
-- -- Volcado de datos para la tabla `ingresos` --
INSERT INTO `ingresos` (`id`, `monto`, `fecha`) VALUES (1, 29, '2016-01-02'), (2, 36, '2016-02-02'), (3, 53, '2016-03-02'), (4, 30, '2016-04-02'), (5, 24, '2016-05-02'), (6, 74, '2016-06-02'), (7, 30, '2016-07-02'), (8, 92, '2016-08-02'), (9, 99, '2016-09-02'), (10, 50, '2016-10-02'), (11, 84, '2016-11-02'), (12, 27, '2016-12-02'), (13, 82, '2015-01-02'), (14, 69, '2015-02-02'), (15, 70, '2015-03-02'), (16, 60, '2015-04-02'), (17, 92, '2015-05-02'), (18, 78, '2015-06-02'), (19, 48, '2015-07-02'), (20, 62, '2015-08-02'), (21, 98, '2015-09-02'), (22, 43, '2015-10-02'), (23, 90, '2015-11-02'), (24, 25, '2015-12-02'), (25, 29, '2016-01-02'), (26, 25, '2016-02-02'), (27, 27, '2016-03-02'), (28, 20, '2016-04-02'), (29, 29, '2016-05-02'), (30, 26, '2016-06-02'), (31, 28, '2016-07-02'), (32, 25, '2016-08-02'), (33, 29, '2016-09-02'), (34, 26, '2016-10-02'), (35, 29, '2016-11-02'), (36, 21, '2016-12-02'), (37, 22, '2015-01-02'), (38, 20, '2015-02-02'), (39, 20, '2015-03-02'), (40, 22, '2015-04-02'), (41, 28, '2015-05-02'), (42, 29, '2015-06-02'), (43, 29, '2015-07-02'), (44, 24, '2015-08-02'), (45, 28, '2015-09-02'), (46, 25, '2015-10-02'), (47, 25, '2015-11-02'), (48, 20, '2015-12-02');
-- -- Índices para tablas volcadas --
-- -- Indices de la tabla `egresos` -- ALTER TABLE `egresos` ADD PRIMARY KEY (`id`);
-- -- Indices de la tabla `ingresos` -- ALTER TABLE `ingresos` ADD PRIMARY KEY (`id`);
-- -- AUTO_INCREMENT de las tablas volcadas --
-- -- AUTO_INCREMENT de la tabla `egresos` -- ALTER TABLE `egresos` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=25; -- -- AUTO_INCREMENT de la tabla `ingresos` -- ALTER TABLE `ingresos` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=49; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Ahora debemos crear nuestro archivo que se encargará de conectar la base de datos y lo llamaremos conexion.php
<?php
/*-------------------------
Autor: Obed Alvarado
Web: obedalvarado.pw
Mail: info@obedalvarado.pw
---------------------------*/
# conectare la base de datos
$con=@mysqli_connect('localhost', 'root', '', 'test_chart');
if(!$con){
die("imposible conectarse: ".mysqli_error($con));
}
if (@mysqli_connect_errno()) {
die("Conexión falló: ".mysqli_connect_errno()." : ". mysqli_connect_error());
}
function monto($table,$mes,$periodo){
global $con;
$fecha_inicial="$periodo-$mes-1";
if ($mes==1 or $mes==3 or $mes==5 or $mes==7 or $mes==8 or $mes==10 or $mes==12){
$dia_fin=31;
} else if ($mes==2){
if ($periodo%4==0){
$dia_fin=29;
} else {
$dia_fin=28;
}
} else {
$dia_fin=30;
}
$fecha_final="$periodo-$mes-$dia_fin";
$query=mysqli_query($con,"select sum(monto) as monto from $table where fecha between '$fecha_inicial' and '$fecha_final'");
$row=mysqli_fetch_array($query);
$monto=floatval($row['monto']);
return $monto;
}
?>
Luego de haber configurado nuestros datos de conexión, vamos a crear el archivo index.php, el cual contiene la lógica necesaria para generar nuestro gráfico de forma dinámica.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Generar reportes con Google Charts, PHP, jQuery y MySQL</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.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(drawVisualization);
function errorHandler(errorMessage) {
//curisosity, check out the error in the console
console.log(errorMessage);
//simply remove the error, the user never see it
google.visualization.errors.removeError(errorMessage.id);
}
function drawVisualization() {
// Some raw data (not necessarily accurate)
var periodo=$("#periodo").val();//Datos que enviaremos para generar una consulta en la base de datos
var jsonData= $.ajax({
url: 'chart.php',
data: {'periodo':periodo,'action':'ajax'},
dataType: 'json',
async: false
}).responseText;
var obj = jQuery.parseJSON(jsonData);
var data = google.visualization.arrayToDataTable(obj);
var options = {
title : 'REPORTE DE INGRESOS VS EGRESOS '+periodo,
vAxis: {title: 'Monto'},
hAxis: {title: 'Meses'},
seriesType: 'bars',
series: {5: {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'error', errorHandler);
chart.draw(data, options);
}
// Haciendo los graficos responsivos
jQuery(document).ready(function(){
jQuery(window).resize(function(){
drawVisualization();
});
});
</script>
</head>
<body>
<div class="container" style="margin-top:10px">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<div class='row'>
<div class='col-md-4'>
<label>Selecciona período</label>
<select id="periodo" onchange="drawVisualization();" class="form-control">
<option value='2017'>Período 2017</option>
<option value='2016' selected>Período 2016</option>
<option value='2015' >Período 2015</option>
</select>
</div>
</div>
<hr>
<div id="chart_div" style="width: 100%; height: 450px;"></div>
</div>
</div> <!-- /container -->
</body>
</html>
Ahora vamos a crear el archivo chart.php, el cual se encarga de procesar los datos y enviarlos vía JSON al archivo index.php, para que éste a su vez se encargue de generar el gráfico mediante una llamada ajax.
<?php
$action = (isset($_REQUEST['action'])&& $_REQUEST['action'] !=NULL)?$_REQUEST['action']:'';
if($action == 'ajax'){
include("conexion.php");//Contiene los datos de conexion a la base de datos
$periodo=intval($_REQUEST['periodo']);
$txt_mes=array( "1"=>"Ene","2"=>"Feb","3"=>"Mar","4"=>"Abr","5"=>"May","6"=>"Jun",
"7"=>"Jul", "8"=>"Ago","9"=>"Sep","10"=>"Oct","11"=>"Nov", "12"=>"Dic"
);//Arreglo que contiene las abreviaturas de los meses del año
$categorias []= array('Mes',"Ingresos $periodo", "Egresos $periodo ");//Nombre de la primer fila del grafico
for ($inicio = 1; $inicio <= 12; $inicio++) {
$mes=$txt_mes[$inicio];//Obtengo la abreviatura del mes
$ingresos=monto('ingresos',$inicio,$periodo);//Obtengo el monto de los ingresos
$egresos=monto('egresos',$inicio,$periodo);//Obtengo el monto de los egresos
$categorias []= array($mes,$ingresos,$egresos);//Agrego elementos al arreglo
}
echo json_encode( ($categorias) );//Convierto el arreglo a formato json
}
?>
Bien esto seria todo, ya hemos creado un gráfico que carga datos de forma dinámica con PHP y MySQL, espero que te sea de utilidad en algún proyecto web.
Comentarios