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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 |
-- 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.12 SET 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<?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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?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.
