App Inventor 2
Programming mobile phones with Android 
by App Inventor 2 - Juan Antonio Villalpando

- Initiation Tutorial App Inventor 2 -

Return to tutorial index

____________________________

45.- Draw a graph by chart.apis

We can get data from a web server:
- communicating with him directly either
- that server has an API so that through a client program (such as a web browser) the user can communicate with that server.

Image obtained from: http://www.appinventor.org/assets/pdf/ch24API.pdf

Google APIs.

App Inventor API.

The concept is more extensive API, but this time is a publicly code Google allows us to use a web browser.

_____________________

Google Chart

We will draw on the screen of mobile graphics mathematics, statistics, geometric, colorful ... typing a web address in your mobile browser.
This web address will take the necessary parameters.

Google chart, is a Google API that allows us to write a line of web address, with a certain format, and returns us a graph of statistical type, bar, pie, lines, ... and we can also be used to draw us function.

- This is Google's website chart: https://developers.google.com/chart/?csw=1

- Examples of Google chart: https://developers.google.com/chart/interactive/docs/gallery

- Examples of statistical graphs and functions found on the Internet:

(Look at your web address)

- Sample 1.

- Sample 2.

- Sample 3.

- (From here)

- You can see more examples: http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=googleChart

- Another example:

- Sample 4. (Here)

_______________________________________________________

45.- Functions with Google api chart

ip45_functions_api_chart

We will create an application where the user will supply the various parameters that make up the graph, which will be added to a text variable, it will form the direction of chart.apis , when we have it , through a browser we write that direction and we will draw the graph on the screen .

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= 400 x 400 &chco= 0000FF &chds= -1 , 1 &chxr=0, 0 , 14 |1, -1 , 1 &chxt=x,y &chfd=0,x, 0 , 14 , 0.001 , sin(x)

That is, it is put in a browser this address:

http://chart.apis.google.com/chart?cht=lc&chd=t:-1&chs= 400 x 400 &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)

Here's the address: Sample 6.

We note that some characters are fixed and others will supply to give the dimensions of the graph, the maximum X and Y coordinates, the formula, scale and color.

Each feeds a variable of type ch

These variables can be in other than the order listed above.

The vertical bar | (which is in the 1 key), we will put through its ASCII code, this is: % 7C

_________________
Design

- I put BlackColor TextBox in Yellow.
- The size of text on 20.
- In Screen1, have marked Scrollable, so that the screen can be moved vertically.
- In each TextBox have set a default value, to leave we are studying the function, sin (x)
- Beware the decimal separator, have set point but is configured as the mobile can be comma (,) (.)

_________________

Blocks

- As I mentioned above, the vertical bar | (which is in the 1 key), we will put through its ASCII code, this is: % 7C
- actually what I called scale would rather the accuracy of the signal , ie increasing values ​​of x.

Code execution.

_________________
Comments.

Suppose we want to see the graph of this function: 5 + 5 * cos (x)

We must put in TextBox Formula:

5 %2B 5 * cos (x)

Notice that the plus sign ( + ), we write through its ASCII code, this is: %2B

- We can build the formula using these functions: http://muparser.beltoforion.de/mup_features.html
- More examples: ( here )
- Sample 7.
- Sample 8.
- Sample 9.

Well this is the idea, similar to the way drawing function, we can draw a statistical graph as we mentioned at the top.

With a little patience you can draw many kinds of functions.

___________________________