|   FOROS      |     Tutoriales    |     KIO4 |      
   Inicio B4A (Basic4Android) App inventor 2 WAMP - PHP - MySQL
   Elastix - VoIP Cosas de Windows Webs interesantes Arduino
  Estación meteorológica Visual Basic Script (VBS) Translate:
Búsqueda en este sitio:


Nuevo concurso para España, Argentina, Brasil, Chile, Colombia, Ecuador, México, Perú y Portugal.

App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial                    Return to index tutorial

____________________________

Chart API Google App inventor. Draw functions. Graphics.

45.- Dibujar un gráfico mediante chart.apis

Podemos obtener datos de un servidor web:
- comunicándonos con él directamente o bien
- que ese servidor tenga una API para que a través un programa cliente (como puede ser un navegador web) el usuario se pueda comunicar con ese servidor.


Imagen obtenida de:
http://www.appinventor.org/assets/pdf/ch24API.pdf
(traducido al español)

APIs de Google.

API en App Inventor.

El concepto de API es más extenso, pero en esta ocasión trata de un código de Google que permite públicamente que podamos utilizarlo desde un navegador web.

_____________________

Google Chart

Vamos a dibujar en la pantalla del móvil gráficas matemáticas, estadísticas, geométricas, de colores... escribiendo un dirección web en el navegador del móvil.
Esa dirección web llevará los parámetros necesarios.


Google chart, es una API de Google que nos permite escribir una línea de dirección web, con cierto formato, y nos devuelve un gráfico de tipo estadístico, barras, tarta, trazos,... y también lo podemos utilizar para que nos dibuje una función.

- Esta es la web de Google chart: https://developers.google.com/chart/?csw=1

- Ejemplos de Google chart: https://developers.google.com/chart/interactive/docs/gallery

- Ejemplos de gráficos estadísticos y funciones encontrados en internet:

(Fíjate en su dirección web)

- Ejemplo1.

- Ejemplo 2.

- Ejemplo 3.

(de aquí)

- Aquí puedes ver más ejemplos: http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=googleChart

- Otro ejemplo:

- Ejemplo 4. (de aquí)

_______________________________________________________

45.- Funciones con la api chart de Google

p45_funciones_api_chart

Basado en esta última web, vamos a realizar una aplicación en donde el usuario suministrará los distintos parámetros que componen la gráfica, que se irán añadiendo a una variable de texto, ésta formará la dirección del chart.apis, cuando la tengamos, mediante un navegador escribiremos esa dirección y nos dibujará la gráfica en la pantalla.


http://chart.apis.google.com/chart
?cht=lc
&chd=t:-1
&chs=Horizontal×Vertical
&chco=Color
&chds=Ymin,Ymax
&chxr=0,Xmin,Xmax|1,Ymin,Ymax
&chxt=x,y
&chfd=0,x,Xmin,Xmax,Escala,Formula

 

http://chart.apis.google.com/chart
?cht=lc
&chd=t:-1
&chs=400x400
&chco=0000FF
&chds=-1,1
&chxr=0,0,14|1,-1,1
&chxt=x,y
&chfd=0,x,0,14,0.001,sin(x)

Es decir, se trata de poner en un navegador esta dirección:

http://chart.apis.google.com/chart?cht=lc&chd=t:-1&chs=400x400&chco=0000FF&chds=-1,1&chxr=0,0,14|1,-1,1&chxt=x,y&chfd=0,x,0,14,0.001,sin(x)

http://chart.apis.google.com/chart?cht=lc&chd=t:-1&chs=400x400&chco=0000FF&chxr=0,0,14|1,-1,1&chds=-1,1&chxt=x,y&chfd=0,x,0,14,0.001,sin(x)

-Aquí está esa dirección: Ejemplo 6.

Observamos que unos caracteres son fijos y otros los vamos a suministrar para dar las dimensiones de la gráfica, las coordenadas máximas de X e Y, la fórmula, la escala y el color.

Cada uno alimenta a una variable de tipo ch

Estas variables pueden ir en otro orden distinto al indicado arriba.

La barra vertical | (que está en la tecla 1), la pondremos mediante su código ASCII, este es: %7C

_________________
Diseño

- He puesto los fondos de los CamposDeTexto en Amarillo.
- El tamaño del texto en 20.
- En Screen1, he marcado Enrrollable, para que la pantalla se pueda desplazar verticalmente.
- En cada CampoDeTexto he puesto un valor por defecto, para que salga la función que estamos estudiando, sin(x)
- Cuidado con el separador decimal, he puesto punto (.), pero según esté configurado el móvil puede ser coma (,)


_________________
Bloques

- Como he indicado antes, la barra vertical | (que está en la tecla 1), la pondremos mediante su código ASCII, este es: %7C
- En realidad lo que he llamado escala sería más bien la exactitud de la señal, es decir el incremento de valores de x.

Ejecución del código.

_________________
Comentarios.

Supongamos que queremos ver la gráfica de esta función:

5 + 5 * cos(x)

Debemos poner en el CampoDeTexto la Fórmula:

5%2B5*cos(x)

Fíjate que el signo más (+), lo escribimos mediante su código ASCII, este es: %2B

- Podemos construir la fórmula mediante estas funciones:
http://muparser.beltoforion.de/mup_features.html

- Más ejemplos: (de aquí)

- Ejemplo 7.

- Ejemplo 8.

- Ejemplo 9.

Bueno pues esta es la idea, de manera similar al dibujo de la función, podemos dibujar un gráfico estadístico como hemos mencionado al principio de la página.

Con un poco de paciencia podrás dibujar muchos tipos de funciones.

__________________________________

- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información