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

Cómo crear una gráficas con el API Chart de Google, con datos extraídos con PHP de una base de datos MySQL.

26/11/08 - 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.

+ 1 manual relacionado
+ 2 categorias relacionadas

Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com URL: http://www.desarrolloweb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

+ Entrar en PHP
+ Entrar en API

Comentarios de los visitantes

Añadir un comentario del artículo Aun no hemos recibido comentarios de este artículo. Puedes ser el primero en enviar tu comentario.

  Ir arriba