En este tutorial, te mostraré como Crear un gráfico circular con Google Chart usando PHP y MySQL. Vamos a crear un gráfico circular simple usando la biblioteca de gráficos de Google con un script php y una base de datos mysql.
Para crear un gráfico circular usaremos la biblioteca de gráficos de Google, también se necesita convertir los datos de mysql mediante php en formato json; ya que la biblioteca de gráficos de Google solo funciona con datos en formato json.
Pasa este tutorial solo usaremos 2 simples archivos:
- index.php: se encarga de mostrar los datos generados por la libreria de google.
- getData.php: se encarga de conectarse a la base de datos, leer los datos y convertirlos en formato json, para que dichos datos puedan ser llamados desde el archivo index.php
Para el desarrollo de este tutorial, es necesario llamar la biblioteca loader.js, ya que se encarga de dibujar el gráfico circular con la API de Google.
Puedes usar tus propios registros, si ya los tienes, puedes crearlos manualmente o copiar y pegar las siguiente consulta SQL en tu base de datos.
|
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 |
-- phpMyAdmin SQL Dump -- version 4.5.1 -- http://www.phpmyadmin.net -- -- Servidor: 127.0.0.1 -- Tiempo de generación: 27-03-2018 a las 20:10:10 -- Versión del servidor: 10.1.19-MariaDB -- Versión de PHP: 7.0.13 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: `google_pie` -- -- -------------------------------------------------------- -- -- Estructura de tabla para la tabla `productos` -- CREATE TABLE `productos` ( `id` int(11) NOT NULL, `codigo` varchar(100) NOT NULL, `producto` varchar(255) NOT NULL, `unidades_vendidas` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Volcado de datos para la tabla `productos` -- INSERT INTO `productos` (`id`, `codigo`, `producto`, `unidades_vendidas`) VALUES (1, 'BD', 'Pantalla LED 32', 6), (2, 'BB', 'Mouse USB', 16), (3, 'VB', 'Disco duro 1TB ', 14), (4, 'WS', 'Teclado USD', 8), (5, 'TN', 'Monitor LG 21', 6), (6, '12000', 'Lector 3nStar', 20); -- -- Índices para tablas volcadas -- -- -- Indices de la tabla `productos` -- ALTER TABLE `productos` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT de las tablas volcadas -- -- -- AUTO_INCREMENT de la tabla `productos` -- ALTER TABLE `productos` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7; /*!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 */; |
Creaando un gráfico circular con Google Chart usando PHP y MySQL
Archivo index.php: Este es el archivo principal, el cual llamaremos desde el navegador.
|
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 |
<!DOCTYPE html> <html> <head> <title>Crear un gráfico circular con Google Chart usando PHP y MySQL </title> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> function drawChart() { // call ajax function to get sports data var jsonData = $.ajax({ url: "getData.php", dataType: "json", async: false }).responseText; //The DataTable object is used to hold the data passed into a visualization. var data = new google.visualization.DataTable(jsonData); // To render the pie chart. var chart = new google.visualization.PieChart(document.getElementById('chart_container')); chart.draw(data, {width: 800, height: 500}); } // load the visualization api google.charts.load('current', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawChart); </script> </head> <body> <div id="chart_container"></div> </body> </html> |
Archivo getData.php: Aquí, he escrito el código de conexión de la base de datos y he obtenido todos los datos de los productos para luego convertirlos en formato JSON.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php // MySQL database connection code $connection = mysqli_connect("localhost","root","","google_pie") or die("Error " . mysqli_error($connection)); //Fetch productos data $sql = "SELECT * FROM productos"; $result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection)); //create an array $array = array(); $i = 0; while($row = mysqli_fetch_assoc($result)) { $producto = $row['producto']; $unidades_vendidas = $row['unidades_vendidas']; $array['cols'][] = array('type' => 'string'); $array['rows'][] = array('c' => array( array('v'=> $producto), array('v'=>(int)$unidades_vendidas)) ); } $data = json_encode($array); echo $data; ?> |
Bien, espero que este pequeño ejemplo te sirva como base para crear gráficas dinámicas usando la API de Google, si tienes alguna consulta, no dudes en hacerme saber dejando un comentario aquí.
