Creación de una gráfica con Google API Chart

  • Por
  • PHP, API
Cómo crear una gráficas con el API Chart de Google, con datos extraídos con PHP de una base de datos MySQL.
Estamos utilizando desde hace poco el sistema de creación de gráficas de Google, que nos ofrece gratuitamente con el servicio API Chart y ha llegado el momento de publicar algunos códigos que venimos utilizando en la creación de gráficos, para que sirvan de guía a los lectores de DesarrolloWeb.com que quieran usar el API de Gráficas en sus webs.

Antes de empezar, para quien no conozca todavía este nuevo servicio de Google, recomendamos la lectura del artículo API de Google para creación de gráficas.

Afortunadamente, Google ha publicado una completa documentación del API Chart en español, por lo que no vamos a explicar los pormenores de la creación de gráficas. En su lugar, os recomendamos que accedáis directamente a la URL donde está la explicación completa del sistema: http://code.google.com/intl/es/apis/chart/

En este artículo vamos a mostrar un par de códigos realizados en PHP para crear unas gráficas de tarta y de barras, con datos que extraemos de una base de datos MySQL. Los datos los extraemos de una tabla de respuestas a encuestas y el objetivo es simplemente mostrar gráficos resultado de las votaciones de usuarios a esas encuestas.

Gráfica de tarta

Veamos cómo realizar una gráfica de tarta, también llamada gráfica circular. Como había comentado, los datos los vamos a sacar con PHP de una tabla de respuestas a encuestas, así que nuestro trabajo será obtener los datos de la tabla y generar el código necesario para mostrar la imagen de la gráfica.

Primero vamos a sacar los votos totales de la encuesta. Luego vamos a sacar todas las respuestas que había en la encuesta y vamos a generar una serie de arrays con los datos que utilizaremos para las gráficas.

El siguiente paso será generar la URL de la imagen que tiene que mostrarse para presentar los datos.

//votos totales
$ssql="select sum(votos) as totales from respuesta where id_encuesta=". $num_encuesta;
//echo $ssql;
$rs = mysql_query($ssql);
$fila = mysql_fetch_object($rs);
$votos_totales = $fila->totales;
mysql_free_result($rs);

//traigo todas las respuestas
$ssql="select * from respuesta where id_encuesta=". $num_encuesta;
$resultid = mysql_query($ssql);

$colores = array("e5f867","596605","375181","bfd1d2","e57e0f","54380c","e50f28","a3129e","082454","f6f830","838383");
$texto = array();
$reporte_votos = array();
$nvotos = array();

while (   $damefila=mysql_fetch_object($resultid)){
   $porcentaje = round(($damefila->votos/$votos_totales)*100);
   array_push($texto,urlencode(utf8_encode($damefila->respuesta . " (" . $damefila->votos . " votos)")));
   array_push($reporte_votos, urlencode(utf8_encode($porcentaje . "%")));
   array_push($nvotos, $porcentaje);
}

//comienzo la creación de la URL de la gráfica con API Chart
$url_api_chart = "http://chart.apis.google.com/chart?chs=600x200";
//tipo de gráfica de tarta
$url_api_chart .= "&cht=p";

//saco la parte que me interesa del array de colores
$colores_utilizados = array_slice($colores, 0, count($texto));
//colores de la gráfica
$url_api_chart .= "&chco=". implode($colores_utilizados, ",");
//señales para cada pedazo de tarta
$url_api_chart .= "&chl=" . implode($reporte_votos, "|");
//leyenda
$url_api_chart .= "&chdl=" . implode($texto, "|");
//valores de gráfica
$url_api_chart .= "&chd=t:" . implode($nvotos, ",");

//echo $url_api_chart;
echo "<img src='$url_api_chart' width=400 height=200 border=0>";


Una gráfica de tarta que saldría a partir de este ejemplo sería como esta:


Gráfica de barras

Ahora, siguiendo este mismo esquema de programación, vamos a alterarlo un poco para que, en lugar de una gráfica de tarta, nos muestre una gráfica de barras.

El esquema de acceso a los datos de MySQL continuaría siendo el mismo, aunque ahora se cambiarán algunos detalles de la creación de la gráfica.

//votos totales
$ssql="select sum(votos) as totales from respuesta where id_encuesta=". $num_encuesta;
//echo $ssql;
$rs = mysql_query($ssql);
$fila = mysql_fetch_object($rs);
$votos_totales = $fila->totales;
mysql_free_result($rs);

//traigo todas las respuestas
$ssql="select * from respuesta where id_encuesta=". $num_encuesta;
$resultid = mysql_query($ssql);

$colores = array("e5f867","596605","375181","bfd1d2","e57e0f","54380c","e50f28","a3129e","082454","f6f830","838383");
$texto = array();
$reporte_votos = array();
$nvotos = array();

while (   $damefila=mysql_fetch_object($resultid)){
   $porcentaje = round(($damefila->votos/$votos_totales)*100);
   array_push($texto,urlencode(utf8_encode($damefila->respuesta . " (" . $damefila->votos . " votos)")));
   array_push($reporte_votos, urlencode(utf8_encode($porcentaje . "%")));
   array_push($nvotos, $porcentaje);
}


//comienzo la creación de la URL de la gráfica con API Chart
$url_api_chart = "http://chart.apis.google.com/chart?chs=400x200";
//tipo de gráfica de barras
$url_api_chart .= "&cht=bhg";
//saco la parte que me interesa del array de colores
$colores_utilizados = array_slice($colores, 0, count($texto));
//colores de la gráfica
//$url_api_chart .= "&chco=4d89f9|c6d9fd";
$url_api_chart .= "&chco=". implode($colores_utilizados, "|");
//señales para cada pedazo de tarta
//valores de gráfica
$url_api_chart .= "&chd=t:" . implode($nvotos, ",");
//leyenda
$url_api_chart .= "&chdl=" . implode($texto, "|");

//echo $url_api_chart;
echo "<img src='$url_api_chart' width=400 height=200 border=0>";



Con estos ejemplos, y la propia documentación del API, esperamos que los lectores de desarrollo web .com puedan crear sus propias gráficas personalizadas según sus necesidades.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Hector

01/3/2009
ES muy interesante y practico el unico inconveniente que veo es que hay q tener internet para que haga la grafica

Alvaro

30/4/2009
Vale?
Esta consulta no vale para encuestas en las que no haya solo datos tipo numericos.
Podrian poner alguna en la que se puedan valorar los datos tipo texto?¿

midesweb

30/4/2009
Estar conectado para ver las gráficas
Efectivamente... hace falta conexión a Internet para poder mostrar la gráfica, porque se accede al API de gráficas de Google, que es quien verdaderamente construye la imagen con la gráfica. Esto no sería problema en la mayoría de los casos, pero claro que si estás trabajando en una Intranet, donde los equipos que acceden a ella no tienen acceso completo a Internet, pues no sería el producto adecuado.

Nosotros ya hemos explicado varios artículos para crear gráficas, con diversas tecnologías y sin la necesidad de estar conectado a Internet, porque las gráficas se generan enteramente en el servidor. Puedes hacerlas con PHP, Javascript, Flash... utiliza nuestro buscador para encontrar artículos similares.

Ariel

06/10/2010
Base de datos
Cuales son los nombres de los campos de la tabla??