UNIVERSIDAD UPC

SOLUCIONES MOVILES Y CLOUD

LABORATORIO 5b

2023
Tabla de contenidos
Desarrollo de una aplicación móvil para usar google chart API. ............................................................................ 3
Diseño. .......................................................................................................................................................................... 5
Creación del proyecto. ................................................................................................................................................. 6
Ejecución. ................................................................................................................................................................... 38

Información del documento

Nombre del Soluciones móviles y cloud
proyecto
Preparado Versión del documento 0.1
por No:
Título: Manual Laboratorio 5b Fecha de la versión del 01/01/2022
documento:
Revisado Fecha de revisión:
por:

Lista de distribución
De Fecha Teléfono/Fax/Email

Para Acción* Fecha Teléfono/Fax/Email

vencimient
o

* Acciones: Aprobar, Revisar, Informar, Archivar, Acción Requerida, Atendido Reunión,

Otro (por favor especifique)

Historia de versión del documento

Fecha de
Nro. Versión Revisado
versión por Descripción Nombre de archivo
Desarrollo de una aplicación móvil para usar google chart API.

El objetivo de este laboratorio es desarrollar una app que permita crear gráficos de torta y línea
usando el google chart api.

Google Charts API y Image Chart API son potentes herramientas de gráficosque le permiten
generar fácilmente varios gráficos, como gráficos de líneas, gráficos circulares, gráficos de
radar y gráficos de burbujas. También puede usar el programa para modificar la gramática para
generar gráficos dinámicamente. La primera es una página web dinámica completa, y la
segunda es una imagen única más simple (uso similar a Google Static Map). Para obtener
documentos detallados, consulte el enlace anterior.

https://chart.googleapis.com/chart?cht=p3&chs=250x250&chd=t:60,40,30 Después de hacer

clic, este es el gráfico circular en 3D a continuación.

http://chart.googleapis.com/chart?chxr=0,0,46&chxt=y&chs=300x225&cht=lc&chco=3D7930&ch
d=s:Xhiugtqi&chg=14.3,-1,1,1&chls=2,4,0&chm=B,C5D4B5BB 0,0,0

Aquí está el gráfico de líneas a continuación: por supuesto, cuantos más efectos tenga la tabla,
más parámetros se agregarán. Es imposible recordar los parámetros uno por uno, por lo
que Google Chart Wizard(https://developers.google.com/chart/image/docs/chart_wizard?hl=zh-
TW) puede ayudarlo a generar gráficos rápidamente. (Nota: Google Chart Wizard ha sido
deshabilitado ... QQ)
Solo necesita seleccionar el tipo de gráfico, luego modificar los parámetros de cada campo y
finalmente copiar el hipervínculo a la derecha. De buen humor.

La programación es bastante simple, es usar el componente WebViewer para cargar la API de

Google Chart para mostrar el gráfico. Y a través de TextBox con botones para lograr efectos
interactivos. Primero, el componente WebViewer primero
cargará https://chart.googleapis.com/chart?cht=p3&chs=320x320&chd=t:10,10,10 como la
pantalla inicial.

Luego, combine el contenido de los tres cuadros de texto con "," y comas para formar una
cadena s, y luego inserte s en chd = t: en la gramática . chd significa datos del gráfico. La API
de Google Chart ajustará automáticamente la proporción en función de los tres números. No es
necesario que redondee los tres números al 100%.
Diseño.
Creación del proyecto.
http://chart.googleapis.com/chart?cht=
&chs=320x320&chd=t:
Ejecución.

Ejecutar->AICompanion
Se muestra