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

___________________________

169DDD.- Dibujar un gráfico mediante chart.apis de Google.

- 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í)

____________________________________

169DDD.- Funciones con la api chart de Google.

p169DDD_javascript_funciones.aia

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.

__________________________________