Getting Web-based Images into a Mobile App – App Inventor Formula Plotting App Using the Google Charts API

Being a lazy sort, one of the things I’d like to be able to do with Google App Inventor is pull content into a mobile app from outside. The recipes for doing this – for example, pulling content in to an app as a list from an RSS feed – still seem to be a little laboured (what I really want is a “get feed” block that can pull in a JSONified RSS feed from an arbitrary RSS URL via a proxy – such as a Yahoo pipe), so I had a scout around for what other sorts of content could be pulled in to an app…

The most obvious one seemed to be images, using an image container and the image blocks:

If the image container sees an image location starting with http://, it knows to retrieve the image from the web.

But what sort of app might be fun to display? A couple of weeks ago, I noticed that you can now plot a mathematical formula using a Google chart, so I had a 10 minute tinker putting the following app together, (followed by a half-hour hassle trying to get the App Inventor environment to connect to my phone properly! I think the workaround may be to install test apps to my phone via a wi-fi or 3G download, rather than via the tethered debugging route. Memories of edit, recompile, run, come flooding back to me!)

But first, some background… By passing a suitably encoded formula as part of a chart configuration URL, the Google chart API can be used to return a line chart that plots out a supplied formula over a certain range: line charts: data functions. One of the easiest ways of playing with the settings is to use theGoogle chart playground, though you still need to remember to encode certain characters, (such as + -> %2B ;-) yourself…

Trying to read through the documentation late last night didn’t make much sense to me, but I came away with the impression that a handy URL pattern could be based around the following:

http://chart.apis.google.com/chart?cht=lc&chd=t:-1
&chds=0,20&chs=250×150&chco=FF0000
&chxr=0,0,11|1,0,20&chxt=x,y
&chfd=0,x,0,11,0.1,sin(x)*4%2B5

More generally:

http://chart.apis.google.com/chart?cht=lc&chd=t:-1
&chs=250×150&chco=FF0000
&chds=YMIN,YMAX
&chxr=0,XMIN,XMAX|1,YMIN,YMAX
&chxt=x,y&chfd=0,x,XMIN,XMAX,XSTEPSIZE,ENCODED_FORMULA

(This may not be a good set of assumptions – but it’s enough to be going on with…)

If we just use a default range for X, Y and the XSTEPSIZE, all we need to supply to a canned URL is a suitably encoded formula. So here’s the proof of concept minimal chart plotting app I came up with:

Here’s what this app does: when the plotChart button is clicked, look to the text entry box (userFormula) for a suitably encoded formula (such as 20*sin(x) or 5%2B5*cos(x) (for 5+5*cos(x)), generate the chart URL, and then load the chart into the outputChart image container.

That is, it’s an app that will plot out a formula for you :-)

I started to parameterise the arguments that make up the call to the chart generating service to make it easy to extend the app to make it easier to support the handling of additional parameters entered via additional entry dialogues (e.g. text boxes); this might then allow the user to specify the range over which the chart was to be plotted, for example, by entering the range limits into separate text boxes, or maybe setting them from a list of predefined alternative ranges.

It would also be easy enough to create canned formula buttons that plot a chart for a predefined function over a predefined range, for example. (I guess it would be possible to create a list containing these options and then allow the user to select the function to be plotted from a list choice menu? Hmm… an exercise for later, maybe;-)

PS Whilst looking through the chart API, I also noticed a new component (I’ve no idea how long it’s been there) for plotting GraphViz generated network diagrams. So for example:
http://chart.apis.google.com/chart?cht=gv
&chs=250×250&chl=digraph{A->B->C;A->C}
gives:

So I should be able to plot network diagrams too? :-)