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

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

29 comentarios en “Google API Chart: Ejemplo de grafica de barras con PHP, jQuery y MySQL”

  1. Augusto dice:

    Hola, gracias por tu ejemplo, aca dejo otro ejemplo de “datosgrafica.php” más simple (con dato hardcode)

    Saludos.

  2. carlos dice:

    porque ami no me funciona, si cree la bd, tengo todo levantado me sale en blanco todo.saludos

  3. verous dice:

    a mi me pasa lo mismo,…me muestra todo en blanco… que puede ser… por favor contestar

    1. denker dice:

      Hola, te marca algun error? o algo?, puedes depurarlo con firebug para ver lo que envias y la respuesta del servidor y asi verificar si el problema esta en el javscript o php. saludos

  4. Marzio Perez dice:

    He usado Highcharts y me gusta más que este plugin de Goolge.

  5. frank dice:

    yo estoy intentando implementar todo en una sola pagina pero solo me imprime el array y no el grafico:

    css(‘main’); ?>

    datos = JSON.parse(datos);
    google.load(“visualization”, “1”, {packages:[“corechart”]});
    google.setOnLoadCallback(dibujarGrafico);

    function dibujarGrafico() {
    var data = google.visualization.arrayToDataTable(datos);

    var options = {
    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
    };

    var grafico = new google.visualization.ColumnChart(document.getElementById(‘grafica’));
    grafico.draw(data, options);
    }

     
    Agro II
    link(‘Inicio’, ‘/clients/index’);?> / Caudales de Rios

     

    Todos los derechos reservados 2010 – Dirección de Información Agraria – Ministerio de Agricultura

  6. Wilson dice:

    ME genera este error !

    SyntaxError: JSON.parse: unexpected character
    [Parar en este error]

    datos = JSON.parse(datos);

    1. Gary dice:

      a mi me dio ese error porque le mande un arreglo de esta forma

      $catalogos = Array (1=> “mes”,”compudadora”, “linea blanca”);

      y me funciono cuando lo hice de la siguiente forma:
      $categorias[] = “mes”;
      $categorias[] = “te”;
      $categorias[] = “tr”;

      $enero[] = “enero”;
      $enero[] = 13.00;
      $enero[] = 14.00;

      $febrero[] = “febrero”;
      $febrero[] = 15.00;
      $febrero[] = 16.00;

      echo json_encode( array($categorias,$enero,$febrero) );

      1. frank dice:

        yo tb necesitaba esa columnas o lineas de manera dinamica asi que leyendo y cambiando un poco pude llegar a esto, espero les funcione:

        google.load(“visualization”, “1”, {packages:[“corechart”]});
        google.setOnLoadCallback(dibujarGrafico);
        function dibujarGrafico() {
        var data = new google.visualization.DataTable();
        data.addColumn(‘string’,’Fecha’);
        data.addColumn(‘number’,’2011′);
        data.addColumn(‘number’,’2012′);
        data.addColumn(‘number’,’2013′);
        data.addRows([<?php
        $numerodefilas=count($mrios);
        $i=0;
        foreach ($mrios as $mrio):
        $i++;
        $fini=explode('-',$mrio['Mrio']['mriosfecha']);
        $fe=$fini[1].'-'.$fini[0];
        if ($i]);
        var options = {
        title: ‘ ‘,
        hAxis: {title: ‘Día-Mes’, titleTextStyle: {color: ‘green’}},
        vAxis: {title: ‘Q=m3/s’, titleTextStyle: {color: ‘#FF0000′}},
        backgroundColor:’#ffffcc’,
        legend:{position: ‘bottom’, textStyle: {color: ‘blue’, fontSize: 13}},
        width:900,
        curveType: “function”,
        pointSize: 2,
        height:500
        };

        var grafico = new google.visualization.LineChart(document.getElementById(‘grafica’));
        grafico.draw(data, options);
        }

         
        Agroclimática
        link(‘Inicio’, ‘/clients/index’);?> / Caudales de Ríos

        <?php
        $tg='’;
        foreach ($mrios as $mrio):
        $tg0=$mrio[‘Mrio’][‘titulo_grafico’];
        if($tg0!=”) { $tg.=$tg0.”; }
        endforeach;
        echo “”.$tg.””;?>

        <?php
        $pg='’;
        foreach ($mrios as $mrio):
        $pg0=$mrio[‘Mrio’][‘pie_grafico’];
        if($pg0!=”) { $pg.=$pg0.”; }
        endforeach;
        echo “”.$pg.””;?>

  7. Richard dice:

    muy bueno tu ejemplo lo he probado y funciona a la perfeción, pero tengo una duda las librerias que utiliza se pueden descargar para que funcione de manera local, si las tienes me las podrias pasar por favor.

  8. cesar dice:

    Tengo el mismo problema pantalla en blanco, es al parecer por la libreria jquery, cambie la ruta pero sigue fallando

    Error: Not a valid 2D array.
    [Detener en este error]

    ... q=(d=!b)?a[0]:[],u=d?a[Nc](1,a[F]):a,C=[];for(f=0;f<l;f++){var D=M;for(d=0;d<u[...

    format...rt.I.js (línea 360)
    POST http://localhost:8080/grafica/datosgrafica.php

    200 OK
    4ms
    jquery....min.js (línea 6)
    EncabezadosEnvíoRespuestaHTML

    [["MES","test1","test2"],["ENERO"],["FEBRERO"]]

  9. Gary dice:

    algo tarde el problema que tienen es que la matriz tiene que ser del mismo tamaño

    Ejemplo anterior :
    [[“MES”,”test1″,”test2″],[“ENERO”],[“FEBRERO”]] <—- malo

    [["MES","test1","test2"],["ENERO",10.20,11.30],["FEBRERO",15.03,18.05]] <– bueno

    yo lo hice funcionar de la siguiente manera:

    $categorias[] = "mes";
    $categorias[] = "te";
    $categorias[] = "tr";

    $enero[] = "enero";
    $enero[] = 13.00;
    $enero[] = 14.00;

    $febrero[] = "febrero";
    $febrero[] = 15.00;
    $febrero[] = 16.00;

    echo json_encode( array($categorias,$enero,$febrero) );

    espero les ayude en algo

    1. Pedro dice:

      Hola GAry crees que me puedas pasar tu ejemplo porfavor

  10. frank dice:

    google.load(“visualization”, “1”, {packages:[“corechart”]});
    google.setOnLoadCallback(dibujarGrafico);
    function dibujarGrafico() {
    var data = new google.visualization.DataTable();
    data.addColumn(‘string’,’Fecha’);
    data.addColumn(‘number’,’2011′);
    data.addColumn(‘number’,’2012′);
    data.addColumn(‘number’,’2013′);
    data.addRows([<?php
    $numerodefilas=count($mrios);
    $i=0;
    foreach ($mrios as $mrio):
    $i++;
    $fini=explode('-',$mrio['Mrio']['mriosfecha']);
    $fe=$fini[1].'-'.$fini[0];
    if ($i]);
    var options = {
    title: ‘ ‘,
    hAxis: {title: ‘Día-Mes’, titleTextStyle: {color: ‘green’}},
    vAxis: {title: ‘Q=m3/s’, titleTextStyle: {color: ‘#FF0000′}},
    backgroundColor:’#ffffcc’,
    legend:{position: ‘bottom’, textStyle: {color: ‘blue’, fontSize: 13}},
    width:900,
    curveType: “function”,
    pointSize: 2,
    height:500
    };

    var grafico = new google.visualization.LineChart(document.getElementById(‘grafica’));
    grafico.draw(data, options);
    }

     
    Agroclimática
    link(‘Inicio’, ‘/clients/index’);?> / Caudales de Ríos

    <?php
    $tg='’;
    foreach ($mrios as $mrio):
    $tg0=$mrio[‘Mrio’][‘titulo_grafico’];
    if($tg0!=”) { $tg.=$tg0.”; }
    endforeach;
    echo “”.$tg.””;?>

    <?php
    $pg='’;
    foreach ($mrios as $mrio):
    $pg0=$mrio[‘Mrio’][‘pie_grafico’];
    if($pg0!=”) { $pg.=$pg0.”; }
    endforeach;
    echo “”.$pg.””;?>

  11. BMF dice:

    Hola gente.
    Para los que tienen el problema de pantalla en blanco, Se soluciona fácil,
    en el ciclo while del mes, cambien las mayúsculas por minúsculas, lo mismo en los arrays.
    Saludos…

  12. erick dice:

    Disculpa tu ejemplo no me muestra la grafica ya qu e tengpo todo igual que en tu ejemplo!!! alguna sugerencia??

  13. rodrigo dice:

    Como enviarle algunas variables al servidor puesto que la consulta a la bd va a ir cambiando de acuerdo a los tipos de graficos o estadisticas q voy a necesitar por favor si alguien me puede ayudar con ese tema

  14. Carlos dice:

    El problema con la pantalla blanca es que la direccion del plugin jquery esta mal;

    //ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

    Deben agregarle el http: al inicio, con eso me funciono a mi.

  15. Beto dice:

    Tengo un problema quiero que los datos de las fechas me las elija de un rango de fechas
    me gustaria saber como puedo generar dinpamicamente esas variables por ejemplo para no poner enero febrero marzo sino que todo eso me lo genere dependiendo del rango de fechas que use dinamicamente

    /*Recorro el resultado y guardo los nombres de las grupos en el arreglo correspondiente
    aqui es donde debo modificar dinámicamente que me ponga las fechas*/
    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) );
    osea como le hago si por ejemplo deseo saber de febrero a diciembre pero esto lo elijo de un datepicker bueno espero haberme exolicado gracias

  16. Rodrigo dice:

    Hola, habrá opción de generar un gráfico circular o de linea en lugar de barras? saludos

  17. Kamus dice:

    Excelente DENKER esta genial el tuto me ayudo mucho grax

  18. Anallely dice:

    Cómo puedo hacer una gráfia depastel??
    No se nada se json 🙁

  19. GUSTAVO dice:

    HOLA! DISCULPA. EL EJEMPLO ESTA BIEN EXPLICADO, LO CUAL TE LO AGRADEZCO. YA DESCARGUE EL ARCHIVO Y LE MODIFIQUE LOS VALORES DE LA CONEXION, CREE LA BASE DE DATOS, INTRODUJE ALGUNOS VALORES, CAMBIE LA PALABRA MES EN MAYUSCULAS POR MINUSCULAS COMO COMENTO UN USUARIO ANTERIORMETE Y COLOQUE LA DIRECCION DEL JQUERY CON HTTP:// PERO ME SIGUE APARECIENDO LA PANTALLA EN BLANCO!! NO SABES PORQUE? ESTARE PENDIENTE DE TU RESPUESTA.
    SALUDOS Y GRACIAS.

  20. Israel Duran dice:

    Hola, a mi me funciona genial, espero ayudar, inicialmente me aparecia la pantalla en blanco como comentan algunos pero introduje algunos datos a la base de datos para que me apareciera la grafica, la query ordena por categoria, si ponen categorias al azar no funciona, por ejemplo tienen que meter datos por ejemplo: 1, ventas, enero, 33 luego en otra insercion: 2, ventas, febrero, 55.
    Gracias por compartir el ejemplo.

  21. Karla López dice:

    Hola, quisiera poner 2 gráficas en un mismo HTML, ya le cambie el valor de la URL y el nombre del div. en cada invocación del script, pero me las 2 gráficas, son iguales, que podría ser?

  22. Pablo dice:

    El problema es que esta preparado para graficar, dos meses con tres categorías. Si mandas otra cantidad no funciona, como se podría adaptar para que grafique de forma dinámica?

  23. juan dice:

    saludos buenos dias realizo paso a paso lo que das y me queda la pagina en blanco, pruebo la conexión con la bd y me conecta bien pero no me genera la grafica que puede ser

  24. Marlene dice:

    Hay alguna manera de cambiar los colores de la gráfica? Ya eh cambiado los titulos y el fondo, pero queria saber si los gráficos se pueden cambiar.

  25. hermes dice:

    Buenas noches , para los que le sale la pagina en blanco recomiendo activar la opción Herramientas desarrolladores del google chrome. En consola ver si hay algún error. Si sale uno que dice algo semejante a Error: Row 0 has 6 columns, but must have 7 at gvjs_oba; el problema seguramente esta en las MAYUSCULAS del codigo en Array o en el contenido de datos de la tabla que no cumple con una cantidad correcta y suficiente. llenela con igual numero de categoría de productos para los 2 meses, como explica Israel Duran

Deja un comentario