Using Chart JS in FileMaker Pro 15’s Web Viewer

I’m doing a project in FileMaker. FileMaker 15. I think the last time I used FMP seriously was 2010-ish- version 11 had just come out. It’s still the same program but there have been some interesting changes. It’s also weird now because I have an entirely different set of experiences with technology that I didn’t have back then.

Screen Shot 2016-06-19 at 9.04.45 AM

FMP’s charting/graphing still leaves much to be desired. I was trying to create a particular chart and thought I’d be slick. I tried many things. Many, many things. I even tried creating stacked bar charts with the initial bar color begin set to transparent (that would have worked) but FMP does not let you set custom color schemes for charts (which is insane). In any case, I started wandering the Internet and found a video on integrating Google Charts with FMP 14 and the web viewer.

The easiest path seems to be —

  1. get your HTML working without FMP variables – make sure all your css/js etc. are full URL paths
  2. Once it’s working, escape all your double quotes by doing a find/replace all with \”
  3. Paste this into a web view component (make sure you wrap the whole thing in double quotes)
  4. you’ll then have something like this in your editing view
  5. switch to browse to make sure it works
  6. If it’s working, it’s time to work in your variables. This is easy but easy to mess up. Every field added needs to be wrapped with the double quotes/ampersand combo like so — “& FIELDNAME &”

That’s pretty much it. You can see a chunk of the code I’m using for a mixed chart chart.js display below. Obviously my variable names won’t work for you but everything else should be portable.

Comments on this post

  1. Andrew Forgrave said on June 19, 2016 at 9:10 am

    ds106, GIFs, AND FileMaker!!

    How come there isn’t a FileMaker category in the Assignment Bank??

    http://edvisioned.ca/2016/05/30/do-you-dream-of-databases/

Leave a Reply

Trackbacks and Pingbacks on this post

No trackbacks.

TrackBack URL