FileMaker Go (Charting?!) on the iPad

[ Update Note: As of Oct 7, 2010 the demo file links return an updated v2 file that was released at DevCon in August. This was discussed in a subsequent blog post, Charting in FileMaker Go for iPad — what’s new in v2 (ChartingWithWebTech.fp7). ]

Web technologies have added functionality to FileMaker solutions since the Web Viewer layout object was introduced in version 8.5. The web viewer has proven especially useful for displaying Flash-generated charts from FusionCharts, Maani, AnyChart, and others.

FileMaker Pro v11 introduced a built-in chart layout object with 5 basic chart types. Charts suddenly became much easier to implement in FileMaker Pro!

However, with FileMaker Go for iPad and Phone (separate apps) built-in charting is not supported and Apple’s iOS doesn’t run Adobe Flash. Sure, you can load static images from the Google charts API into a web viewer — but what is really needed is an interactive and self-sufficient (as in no internet connection required) charting solution.

Luckily, the potential of HTML5 for charting is huge, and the spec that affects charting functions (via the canvas tag) is fairly stable. It is uncertain how soon HTML5 will be fully ratified, though, so you won’t want to wait. Jump in now, using CSS3 and JavaScript, as demonstrated in our demonstration file, released today. Go ahead, I’ll wait — download the file now. 😉 Okay, want another reason? It has a new formula in the version checker on file startup that produces the string you can see at the bottom of the screensnap: “Currently running FileMaker Go for iPad 1.0.1 on iOS 3.2.1” (or whatever your current versions truly are). The script reports all versions of FileMaker on all current platforms on all devices. [ Note: The version-checking startup script is explained in detail in another blog post: A Startup Subscript: Checking version/platform/device. ]

Choice of download type: zipped, as usual and UNzipped, for easy loading directly to your iPad.

Enjoy! (and please send me your feedback)

Lee

——————————-
Response to Feedback, 7/29/2010:

Okay, so you sent me your feedback. 😉 A concern was expressed that to use this charting method one would need to know HTML, CSS, and JavaScript. I don’t think that’s necessarily the case…

So does a person need to know these web technologies to do iPad charting?
From the context of my iPad charting demo file:

1) JavaScript: No. You don’t need to edit any JavaScript. Only the last script changes at all, and that is driven by a chart chooser dropdown list.

2) HTML: Not really — only to the extent you want to change the layout of the data table. Folks will probably show data in FM, anyway — I just include it for demonstration. (Which points out I should add an option to hide the HTML data table.)

3) CSS: It is true that to change a chart’s look, the demo file requires that one muck about with the actual CSS code. If you don’t know CSS, go ahead and take a look at the code — after sitting with it a few minutes you can probably see the pattern of how it works (or at least which items may affect label and caption text size and color, line widths, and element positions, for example). The old trial & error method works fairly well here, too. And it wouldn’t be too hard (laborious, yes — but not hard) to build a FileMaker interface to change selected CSS settings on the fly. Hmm…

Version v1.2, 7/23: added “deny ANY access” option and separated iPhone/iPad rules. I also added a demo of two methods to make tab controls more accessible on small form factor devices (i.e. iPad, for now).
Version v1.3, 7/25: improved layout behavior on iPad, added iPhone landing page, seach term highlighter for CSS field
Version v1.4, 7/26: added iPhone splash & CSS legend pop-up; improved version test logic and startup sequence
Version v1.5, 7/28: Added default to strip text formatting for HTML Result (to speed iPad screen draw); alt/opt-click preserves template colors
Version v1.6, 7/29: added option to show/hide the HTML data table (on the Web Viewer tab)