PDA

Ver la versión completa : Utilizando APIs de Google: Charts



Arielo
17/04/2009, 12:34
A través de una herramienta de Google, Charts, podemos incorporar a nuestros programas, gráficos de todo tipo.

Por ejemplo, un gráfico de torta como este:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello%7CWorld


Para incorporar esta funcionalidad en nuestros sistemas (VBasic 6.0), podemos hacerlo agregando un control WebBrowser (la DLL se llama shdocvw.dll):

1 - Ir a menú "Proyecto"
2 - Seleccionar opción "Componentes... (CTRL+T)"
3 - Entre los componentes que tengamos disponibles, seleccionar "Microsoft Internet Controls"
4 - Si no lo tenemos, buscar en el disco la DLL correspondiente, haciendo clic en "Examinar"
5 - En los controles disponibles, deberá aparecer el ícono correspondiente (ver adjunto)

Ahora, en el formulario donde queremos agregar el gráfico, colocamos una instancia del control WebBrowser, y un botón, que mostrará el gráfico al pulsarlo.

en el código del botón, colocar:

Private Sub Command1_Click()
WebBrowser1.Navigate ("http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World")
End Sub
Y listo!!... Esto, mostrará el gráfico de arriba en nuestro form. Ahora, pasemos a las distintas opciones del gráfico...

Observemos la url que le pasamos como parámetro al webbrowser.
La primera parte, hace la llamada a la API de Google Charts: "http://chart.apis.google.com/chart?"
Luego viene una serie de parámetros separados por un ampersand (&). Estos parámetros son configurables de distintas maneras, para que muestre distintos tipos de gráficos...
(en negrita, parámetro a pasar. En itálica, valor del parámetro)

cht=p3 --> tipo de gráfico
chd=t:60,40 --> Porcentaje de cada componente
chs=250x100 --> tamaño del gráfico a mostrar, en pixeles
chl=Hello|World --> Etiqueta del gráfico, separado por barra vertical para cada una de los componentes diferentes

En esta (http://code.google.com/intl/es-ES/apis/chart/#line_charts) dirección, encontrarán un listado detallado de todos los tipos de gráficos que es posible utilizar...
.

Arielo
17/04/2009, 16:15
Para realizar un ejemplo, utilizaremos los datos de esta (http://foros.monografias.com//showthread.php?t=51499) encuesta.

Los valores hasta este momento, son:


4 - Satisfech@
1 - Insatisfech@
1 - No tiene


Cadena:
http://chart.apis.google.com/chart?cht=p3&chd=t:4,1,1&chs=700x100&chl=Satisfech@|Insatisfech@|No%20tieneGráfico generado:

http://chart.apis.google.com/chart?cht=p3&chd=t:4,1,1&chs=700x100&chl=Satisfech@%7CInsatisfech@%7CNo%20tiene




Mostrar mapas:
Existe un parámetro ("chtm") que nos permite mostrar un mapa de distintas regiones del mundo. Los valores para ese parámetro pueden ser: africa, asia, europe, middle_east, south_america, usa, world.
El tamaño máximo disponible para cualquier mapa, es de 440x200 pixeles.
Cadena:
http://chart.apis.google.com/chart?cht=t&chs=440x220&chtm=south_america&chd=s:_Gráfico:

http://chart.apis.google.com/chart?cht=t&chs=440x220&chtm=south_america&chd=s:_





Para colorear un determinado país, utilizar:
"chld=" seguido del código ISO (http://code.google.com/intl/es-ES/apis/chart/#iso_codes) de los países a colorear
"chco=rrggbb,rrggbb,rrggbb" donde irán los colores predeterminado en formato RRGGBB, y los colores para el gradiente del país seleccionado.
"chd=" valor con el que se coloreará cada país que aparece en "chld". Deberá tener tantos valores como países contiene "chld". El valor mínimo es A, 0 o AA, y el máximo 9, 100, etc. Representa un color dentro del gradiente.

Cadena:
http://chart.apis.google.com/chart?cht=t&chs=440x220&chtm=south_america&chd=s:A9&chld=ARVE&chco=ffffff,edf0d4,13390aObserven que acá colorearemos Argentina (código ISO = AR) y Venezuela (código ISO = VE). Esto lo especificamos con "chld=ARVE"
Argentina tendrá un color suave (indicado por la "A" de "chd=s:A9") y Venezuela un color más oscuro (indicado por el "9" de "chd=s:A9")
Gráfico resultante:

http://chart.apis.google.com/chart?cht=t&chs=440x220&chtm=south_america&chd=s:A9&chld=ARVE&chco=ffffff,edf0d4,13390a