FileMaker provides us with many great tools for reporting purposes. One of these tools is charting capabilities. FileMaker’s built in charting can be very useful for displaying a variety of analytics, but sometimes you run across a situation where you need just a bit more than what FileMaker offers. This is where using jQuery in FileMaker can be your best friend.
In this post I will illustrate a technique that will allow for much more advanced charting in FileMaker. By using the techniques I’ve outlined in past posts in this series, we will create animated jQuery charts that can display multiple data sets in the same chart as well as having a choice of various chart types.
I am a big fan of Chart.js (http://www.chartjs.org/). It is a jQuery based charting plug-in for creating animated jQuery charts of many sorts including bar, doughnut, line, pie, polar area and radar charts. It’s extremely versatile, easy to implement and fully customizeable.
Now, let’s get into the nitty gritty…
First things first, let’s assume that we have a solution where we have fields containing aggregated data that we would like to chart. Typically, these would be calculation fields that perform summaries or totals.
Step 1 – Acquire Chart.js jQuery library:
First thing is to download the Chart.js library files from Chart.js (http://www.chartjs.org/). The zip file you will download contains all the js and sample files needed to produce the desired chart.
Step 2 – Creating the HTML:
For this example, in FileMaker, I have two series of data representing sales for a particular month in a 5 month range (Jan-May). I also have fields for each data set where I can enter RGB values for the fill and stroke of the graph element(s) simply by specifying the RGB values separated by commas (eg. 64, 157, 239).
Once we have the code altered to our scenario, we can now copy all of the code in the HTML file and bring it into FileMaker.
Warning: Due to encoding differences, some text editors may cause errors when placing code into FileMaker. If you are experiencing issues with no chart display, try using a different text editor to copy and paste code into FileMaker.
In FileMaker, we will create a text object to the right of our layout and paste our HTML code into this text object. Then we need to give our text object an object name so, in the inspector, choose the “Position” tab and enter a name for your text object; I used “chart_code” in my example. Now we need to create a webviewer to display the HTML we’ve created. Using the webviewer tool, draw a webviewer object on your layout. When the dialogue appears, choose “Custom Web Address” in the “Choose a Website” pane and enter “data:text/html,” & GetLayoutObjectAttribute ( “chart_code”; “content” ) in the “Web Address” field.
At this point, you should be able to enter Browse mode and view the result. This can be a very powerful charting system as it allows for many different customizeable chart types, styles and options. I hope you’ve enjoyed this post and thank you for reading. Happy charting!
If you have any questions or would like to have assistance implementing these features in your solutions, please contact us at scarpettagroup.com
Front End Developer / FileMaker 12 Certified Developer
The Scarpetta Group, Inc.