Google API Chart: Ejemplo de grafica de barras con PHP, jQuery y MySQL

Stay hungry, stay foolish

Steve Jobs

Hace tiempo escribí un post en el cual les mencionaba algunas librerías que existen para generar graficas y tambien un ejemplo con la libreria jpGraph, el día de hoy toca el turno a Google Chart Tools la libreria de google que nos permite crear gráficas, en el ejemplo se va a crear una gráfica de columnas agrupadas obteniendo los datos de una base de datos MySQL con PHP y jQuery.

grafica

ESTRUCTURA DE LA TABLA A GRAFICAR

CREATE TABLE IF NOT EXISTS `tblventas` (
 `idventa` int(10) unsigned NOT NULL AUTO_INCREMENT,
 `categoria` varchar(20) NOT NULL,
 `mes` varchar(10) NOT NULL,
 `total` decimal(9,2) unsigned NOT NULL,
 PRIMARY KEY (`idventa`)
) ENGINE=InnoDB

Archivo: grafica.html

comenzamos incluyendo la librería Google y jQuery con las siguientes lineas

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Después colocamos el código javascript que obtiene los datos del servidor y muestra la gráfica.

Comenzamos el código que obtiene los datos del servidor, para lo cual haremos una petición ajax que devolverá un JSON con la información a graficar que se se almacenará en la variable datos

var datos = $.ajax({
    		url:'datosgrafica.php',
    		type:'post',
    		dataType:'json',
    		async:false
    	}).responseText;

Pero para la grafica se necesita que la informaicon sea un objeto JSON entonces lo convertimos con la funcion JSON.parse()

datos = JSON.parse(datos);

Ahora que ya tenemos los datos de la gráfica comenzamos con el código que la va a dibujar:

/*Se carga el modulo que se va a utilizar en este caso visualization,
seguido de la versión y el paquete que ses corechart para la grafica*/
google.load("visualization", "1", {packages:["corechart"]});

/* En esta linea se indica que se va a llamar a la función dibujarGrafico
una vez que el documento se haya terminado de cargar*/
google.setOnLoadCallback(dibujarGrafico);

function dibujarGrafico() {
    /* La informacion que se obtuvo del servidor se convierte a un dataTable
       para que se muestre en el grafico */
    var data = google.visualization.arrayToDataTable(datos);

    /* Se definen algunas opciones para el grafico*/
    var opciones = {
      	title: 'VENTAS DEL PRIMER BIMESTRE',
       	hAxis: {title: 'MESES', titleTextStyle: {color: 'green'}}
        vAxis: {title: 'MILES DE PESOS', titleTextStyle: {color: '#FF0000'}},
        backgroundColor:'#ffffcc',
        legend:{position: 'bottom', textStyle: {color: 'blue', fontSize: 13}},
        width:900,
        height:500
    };
   /* se crea un objeto de la clase google.visualization.ColumnChart  ( Grafica de columna )
    en el cual se indica cual es el elemento HTML que contendrá a la gráfica */
   var grafico = new google.visualization.ColumnChart(document.getElementById('grafica'));
   /* Se llama al método draw para dibujar la gráfica
   grafico.draw(data, opciones);
}

Ahora el código HTML es el siguiente

<div id="grafica"> </div>

Archivo: datosgrafica.php

En la parte del servidor es donde se crean las consultas y se arma la estructura de los datos a mostrar en la gráfica. Para este ejemplo vamos  a graficar las ventas de los meses del mes de enero y febrero para las diferentes categorías que tenemos en nuestra base de datos.

La estructura de la informacion debe estar de la siguiente forma

MES CATEGORIA 1 CATEGORIA 2 CATEGORIA X
ENERO 1000 1500 2500
FEBRERO 1000 1500 2500

Para generar dicha estructura voy a trabajar con 3 arreglos el primero contendrá los nombres de las categorías, el segundo las ventas de mes de enero y el tercero las ventas del mes de febrero, una vez explicado lo anterior pasemos al codigo php

/* Hace la conexion a la base de datos*/
$conexion = new mysqli('servidor','usuario','password','baseDatos');
/* Creo los 3 arreglos con su primer elemento*/
$categorias = array('MES');
$enero = array('ENERO');
$febrero = array('FEBRERO');

/* Creo la primer consulta que obtendrá los nombres de las categorias
$consulta = "SELECT DISTINCT(categoria) FROM tblventas WHERE mes = 'enero' OR mes = 'febrero' ORDER BY categoria";
/* Se ejecuta la consulta*/
$result = $conexion->query($consulta);

/*Recorro el resultado y guardo los nombres de las categorías en el arreglo*/
while ($fila = $result->fetch_array()) {
    $categorias[] = $fila['categoria'];
}

/* Creo la segunda consulta que obtiene los totales de ventas */
$consulta = "SELECT categoria, mes, total FROM tblventas WHERE mes = 'enero' OR mes = 'febrero'  ORDER BY mes, categoria;";
/* Se ejecuta la consulta*/
$result = $conexion->query($consulta);
/*Recorro el resultado y guardo los nombres de las categorías en el arreglo correspondiente*/
while($fila = $result->fetch_array()){
    if($fila['mes'] == 'ENERO')
	$enero[] = (double)$fila['total'];
    else if ($fila['mes'] == 'FEBRERO')
	$febrero[] = (double)$fila['total'];
}

/* Preparo la respuesta que se va a regresar como JSON*/
echo json_encode( array($categorias,$enero,$febrero) );

Eso seria todo aquí les dejo el link para descargar el ejemplo completo y el demo de la gráfica, si les es útil la información compartanla y recomienden el blog.
demo

download