Filemaker | flash chart & graph with web viewer

Have been using Filemaker for over 4 years now and only just have I found the need for a chart. My needs were simple I didn’t need anything flashy and it needed to be something quick to implement but with enough options to not leave me wanting.

Here is a list of the ready-made solutions I found and finishing with what I ended up using:

1. Chartmaker Pro

This can be found on www.briandunning.com and is a $40 solution that doesn’t use a plugin or any external files which is great and simply relies upon calculation fields. However it didn’t look that great for some of the examples I wanted and really felt it was going to let me down on some of the more complicated graphing that I wanted to achieve.

2. Nightwing Enterprises – Dynamic Charting

This is a great non-plugin way of creating a nice simple graph. Its basically all created from some html scripting within a web viewer – Ray from Nightwing Enterprises, as always, has taken things further, than my example below, using table formatting and some nice use of png and gif files embedded in a container field.

Here is my simplfied example of Ray’s chart. All you need is a Filemaker database with 5 fields (4 values / 1 for the colour) and a web viewer. In the web viewer you add this in as a custom web address (n.b you need to update Database::Field1 – 4 and Database::ColourField with the field names you decide on).

“data:text/html,” &

Let(
[max = Max(Database::Field1; Database::Field2; Database::Field3; Database::Field4 );
height_1 = Round(Database::Field1 / max; 2);
height_2 = Round(Database::Field2 / max; 2);
height_3 = Round(Database::Field3 / max; 2);
height_4 = Round(Database::Field4 / max; 2)];

“<html>
<head>
<style>div { background: ” & Database:ColourField & “; position: absolute; width: 21%; bottom: 0; float: left;}</style>
<body style=\”border: 0; margin: 0;\”>
<div style=\”left: 0; height: ” & (height_1 * 100) & “%\”></div>
<div style=\”left: 25%; height: ” & (height_2 * 100) & “%\”></div>
<div style=\”left: 50%; height: ” & (height_3 * 100) & “%\”></div>
<div style=\”left: 75%; height: ” & (height_4 * 100) & “%\”></div>
</body>
</html>”
)

Now enter some numbers in the 4 cells and a hex colour in the colour field and, Bobs your uncle, a native chart.

Below is a zipped download of Ray’s dynamic chart and check out Nightwing Enterprise for some other awesome files he has.
dynamicchart (.zip)

3. Fusioncharts for Filemaker

I have had trialed this in its XML format for websites so was fairly familiar with this product. My main issue with Fusioncharts is that, although from all the charting solutions listed here it offers the most options (particularly if you go for the paid pro version – developer licence starts at $129), it doesn’t use a single .swf file for all the chart types. Also the graphs, although are flashy, do have a certain style/brand about them which is difficult to shrug off and fit your solution’s style. Here is a list of examples – see what I mean?

If I needed lots of charts in my Filemaker solutions this may well of been a good choice but since I am looking for a simpler solution I gave this one a miss too.

4. xmChart for Filemaker

This one is the first and only plug-in version of a charting solution that I have listed. xmChart is a lot more customisable and you are able to make it fit solutions a lot better than Fusioncharts in terms of styling. However this isn’t free and a single user licence starts at $129 ($460 for a single developer licence).

For me one of my boxes to tick was “Very cheap, or better still free!”. For me although this as with Fusioncharts offered lots of customisation and options, I felt it was probably more functionality than I needed.

5. The solution I went with…

I decided that using the Web Viewer, as with the Nightwing Enterprise solution, but with a external flash file was probably my best option here and I simply needed to find a nice customisable flash chart. Although this didn’t offer a completely native solutions none of the native solutions really had the flexibility I wanted.

With this solution I am using 2 external files WV.swf and WV.html. Now my solution is a network one, so having some external files in network folders and referencing them isn’t really an issue – however to add a little bit more rigidity to it I had embedded these 2 files into the database, ran a script before viewing a chart to check the network place was accessible and then if it wasn’t use ExportFieldContents function. With that script the 2 files are exported to the users my documents folder and then the charts reference the 2 files from there.

The basic format of the URL for the Web Viewer is thus which references fields:

Let ( vP = Substitute ( Get ( FilePath ) ; Get ( FileName ) & “.fp7” ; “WV.html” ) ; If ( Abs ( Get ( SystemPlatform )) = 2 ; vP ; Substitute ( vP ; “file:/” ; “file://” ) )) & “?type=intropie” & “&amounts=” & fieldAmount1 & “,” & fieldAmount2 & “,” & fieldAmount3 & “,” & fieldAmount4 & “&labels=” & fieldLabel1 & “,” & fieldLabel2 & “,” & fieldLabel3 & “,” & fieldLabel4

giving…

file:///Y:/Temp/Web%20Viewer%20Charting%20Example/WV.html?type=intropie&amounts=5000,6000,17000,13450&labels=BBX,BMK,BMX,BMZ

It certainly ticks all my boxes:

  • It is easy to setup? – YES, the easiest in this list, a simple HTML formatted URL in a Web Viewer and 2 externally referenced files.
  • Does it offer enough customisation for my needs? – YES, options for pretty much everything that most basic charting needs. You can do all the main charts; Bar, Pie, Line, Scatter and Gantt. You can customised the fonts, colours, labels, titles, legends and whether you want 2D or 3D version.
  • Is it cheap, ideally free? – YES, cost me nothing almost a native solution with a little flash, perfect!
  • Is it easy to implement, ideally native? – NO, but still easy – it references 2 external files, they both have a small footprint and could easily be exported to a user folder, via a script, if networking is an issue.

Here is a zipped demo file for downloading with the required external files embedded – it will extract the files to the folder you open the charts in and reference them from there. I haven’t tested it in older version of Filemaker like v8.5 where the Web Viewer was first launched – but it certainly works a treat in v9 that I am using. Enjoy!

web-viewer-charting-example (.zip)